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HTML 5 是 用 于 取代 HTML 4.01 和 XHTML 1.0 标准 的 HTML 标准 版 本 ，2014 年 10 月 
底 ，W3C 正式 发 布 了 HTML 5 标准 ， 目 前 大 部 分 浏览 器 已 经 开始 支持 HTML 5 技术 。HTML 
5 有 两 大 特点 : 一 是 强化 了 Web 网 页 的 表现 能 力 ， 另 一 是 增加 了 离线 存储 、Web 通信 等 新 功 
能 。 随 着 HTML 5 规范 的 日 益 成 熟 ，HTML 5 将 成 为 主流 页 面 语言 HTMLS5 会 带 来 一 个 统一 
的 、 跨 平台 的 网 站 应 用 体验 , 无论 是 笔记 本 、 人 台式 机 ， 还 是 智能 手机 、 平 板 电脑 等 移动 设备 都 
应 该 很 方便 地 浏览 基于 HTML5 的 网 站 。 因 此 ， 在 设计 网 站 的 时 候 ， 开 发 者 需要 重新 考虑 用 户 
体验 、 网 站 功能 、 网 站 结构 等 因素 ， 使 网 站 对 任何 硬件 设备 都 通用 。 在 这 个 背景 下 ， 目 前 学 习 
和 关注 HTML 5 网 页 设计 的 人 越 来 越 多 ， 而 很 多 HTML 5 的 初学 者 都 苦于 找 不 到 一 本 通俗 易 
懂 、 容 易 入 门 和 案例 实用 的 参考 书 。 为 此 ,作者 组 织 有 丰富 经 验 的 开发 人 员 编写 了 这 本 HTML 
5 网 页 设计 的 教材 。 


HTML 5 的 优点 

提高 了 可 用 性 并 改进 了 用 户 体 验 ; 

提供 了 新 的 标签 ， 有 助 于 开发 人 员 定 义 重要 的 内 容 ; 
可 以 给 站 点 带 来 更 多 的 多 媒体 元 率 ( 视频 和 音频 ); 
可 以 很 好 地 替代 FLASH 和 Silverlight; 

当 涉及 网 站 的 抓 取 和 索引 的 时 候 ， 对 于 SEO 很 友好 ; 
可 以 大 量 应 用 于 移动 应 用 程序 和 游戏 的 开发 ; 

可 移植 性 好 。 


本 书 特色 


深 地 掌握 HTML 5 网 页 设计 技术 。 

@ 图 文 并 茂 : 注重 操作 ， 图 文 并 茂 ， 在 介绍 案例 的 过 程 中 , 每 一 个 操作 均 有 对 应 的 插图 。 
这 种 图 文 结合 的 方式 使 读者 在 学 习 过 程 中 能 够 直观 、 清 晰 地 看 到 操作 的 过 程 和 效果 ， 
便于 更 快 地 理解 和 掌握 。 

@ 吻 学 易 用 : 颠覆 传统 “看 ” 书 的 观念 ， 变 成 一 本 能 “操作 ”的 图 书 。 

@ 案例 丰富 : 把 知识 点 融 汇 于 系统 的 案例 实 训 当中 , 并 且 结合 经 典 案例 进行 讲解 和 拓展 ， 
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达到 “ 知 其 然 ， 并 知 其 所 以 然 ” 的 效果 。 

@ 提示 技巧 : 本 书 对 读者 在 学 习 过 程 中 可 能 会 遇 到 的 疑难 问题 以 “提示 ”和 “技巧 ”的 
形式 进行 了 说 明 ， 以 免 读 者 在 学 习 的 过 程 中 走 谊 路 。 

@ 技术 实用 : 本 书 所 有 案例 都 是 模仿 现实 网 站 开发 而 设计 ， 在 实际 工作 中 的 参考 性 比较 
强 。 


读者 对 象 
本 书 是 一 本 完整 介绍 HTML 5 网 页 设计 的 基础 教程 ， 适 合 如 下 读者 学 习 使 用 : 


@ 对 网 页 设计 感 兴趣 的 初学 者 ， 可 以 快速 上 手 设计 精美 的 网 页 。 
@ 对 HTML 5 语言 感 兴趣 的 读者 ， 可 以 快速 掌握 HTML 5 并 设计 需要 的 网 页 。 
@ 对 开发 Web 系统 的 人 ， 可 以 作为 HTML 5 语言 参考 书 。 


代码 、 课 件 和 教学 视频 下 载 


本 书 代码 、 课 件 和 教学 视频 可 以 从 下 面 网 址 下 载 : 
http://pan.baidu.com/s/1gdhCDUV 
如 果 下 载 有 问题 ， 请 发 邮件 给 booksaga@163.com， 邮 件 主 题 为 “ 求 HTML5 代码 ”。 
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目前 , 网 络 已 经 成 为 人 们 生活 和 工作 当中 不 可 缺少 的 一 部 分 , 那么 网 页 就 是 呈现 给 人 们 信 
息 的 平台 。 因此, 怎么 样 把 信息 很 好 地 呈现 在 网 页 当中 , 就 成 了 一 个 值得 研究 的 课题 一 一 网 页 
设计 与 制作 。 制 作 网 页 可 采用 可 视 化 编辑 软件 ,但 是 无 论 采 用 哪 一 种 网 页 编辑 软件 ， 最 后 都 要 
将 所 设计 的 网 页 转化 为 HTML 语言 ， 当 前 最 新 版 本 是 HTML 5。 


1.1 HTML 5 简介 


HTML 是 用 来 描述 网 页 的 一 种 语言 


标记 语言 (标记 语言 是 一 套 标记 标签 ，HTML 使 


用 标记 标签 来 描述 网 页 ) ， 而 不 是 编程 语言 ， 它 是 制作 网 页 的 基础 语言 ， 主 要 用 来 描述 超 文本 
中 内 容 的 显示 方式 。 
lt HTME 


标记 语言 经 过 浏览 器 的 解释 和 编译 ， 能 正确 显示 HTML 标记 的 内 容 ， 但 它 本 身 不 显示 在 
浏览 器 中 。 

HTML 语言 从 HTML 1.0 至 HTML 5 经 历 了 巨大 的 变化 ,从 单一 的 文本 显示 功能 到 图 文 并 
成 的 多 媒体 显示 功能 ， 许 多 特性 经 过 多 年 完善 ， 已 经 成 为 一 种 非常 标准 的 标记 语言 。HTML 
经 历 的 版 本 及 发 布 日 期 如 表 1-1 所 示 。 


表 1-1 HTML 的 版 本 及 发 布 日 期 


版 本 发 布 日 期 说 明 
:为 互联 网 工程 工作 小 组 (IETF) 工作 草案 发 布 (并 非 
超 文本 标记 语言 (第 一 版 ) | 1993 年 6 月 作 J 互 轿 程 工作 小 作 草 案 发 布 〈 并 井 
标准 ) 
作为 RFC 1866 发 布 ， 在 RFC 2854 发 布 之 后 被 宣布 已 
HTML 2.0 1995 年 11 月 
经 过 时 
HTML 3.2 1996 年 1 月 14 日 | W3C 推荐 标准 
HTML 4.0 1997 年 12 月 18 日 | W3C 推荐 标准 
HTML 4.01 1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 
a. 基于 严格 的 HTML 4.01 语法 ， 是 国际 标准 化 组 织 和 
ISO HTML 2000 年 5 月 15 日 Sh 
际 电工 委员 会 的 标准 
| W3C 推荐 标准 ， 后 来 经 过 修订 于 2002 年 8 月 1 日 重新 
XHTML 1.0 2000 年 1 月 26 日 、 
发 布 
XHTML 1.1 2001 年 5 月 31 日 | 较 1.0 有 微小 改进 
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( 续 表 ) 
版 本 发 布 日 期 说 明 
XHTML 2.0 草案 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 
HTML 5 草案 2008 年 1 月 目前 的 HTML 5 规范 都 是 以 草案 发 布 ， 都 不 是 最 终 版 本 
HTML S 2014 年 10 月 正式 发 布 
HTML5.1 | 2016 年 底 前 发 布 “| 计划 


完整 的 HTML 文档 可 以 说 就 是 一 个 网 页 ,在 该 文档 中 包括 HTML 标签 和 纯 文本 , 而 Web 
浏览 器 的 作用 就 是 读 取 HTML 文档 ， 并 以 网 页 的 形式 显示 出 来 。 
【 例 1.1】 一 个 完整 的 HTML 文档 


<html> 

<body> 
<hl> 标 题 <hl> 
<p> 锻 炼 .</p> 
</body> 
</html> 


该 HTML 文档 的 介绍 如 下 : 


14:12 


<html> 与 </html> 之 间 的 文本 是 描述 网 页 的 。 
<body> 与 </body> 之 间 的 文本 是 可 见 的 页 面 内 容 。 
<hl> 与 </h1> 之 间 的 文本 被 显示 为 标题 。 
<p> 与 </p> 之 间 的 文本 被 显示 为 段落 。 


HTML 5 


HTML 5 用 于 取代 1999 年 所 制定 的 HTML 4.01 和 XHTML 1.0, 目前 标准 刚刚 正式 发 布 ， 
但 大 部 分 浏览 器 已 经 能 支持 HTML 5 的 某 些 技术 了 。HTML 5 对 多 媒体 的 支持 功能 很 强大 , 新 
增 了 如 下 功能 : 


语义 化 标签 ， 使 文档 结构 明确 。 
文档 对 象 模型 ( DOM )。 

实现 2D 绘图 的 Canvas 对 象 。 
可 控 媒 体 播放 。 

离线 存储 。 

文档 编辑 。 

拖 放 。 

跨 文 档 消息 。 

浏览 器 历史 管理 。 

MIME 类 型 和 协议 注册 。 
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【分 对 于 这 些 新 功能 ， 支 持 HTML 5 的 浏览 器 在 处 理 HTML 5 代码 出 错时 必须 要 更 加 
注 得 灵活 ， 而 那些 不 支持 HTML 5 的 浏览 器 将 忽略 HTML 5 代码 。 
忆 


HTML 5 的 最 大 优势 是 语法 结构 非常 简单 ， 它 具有 以 下 特点 : 


@ HTML 5 编写 简单 。 即 使 用 户 没有 任何 编程 经 验 ， 也 可 以 轻松 使 用 HTML 设计 网 页 ， 
只 需 在 文本 加 上 一 些 标 记 (Tags ) 即 可 。 

@ HTML 标记 数目 有 限 。 在 W3C 所 建议 使 用 的 HTML 5 规范 中 ， 所 有 的 控制 标记 都 是 
固定 的 ， 且 数目 也 是 有 限 的 。 所 谓 固定 是 指控 制 标记 的 名 称 固定 不 变 ， 且 每 个 控制 标 
记 都 已 被 定义 过 ， 其 所 提供 的 功能 与 相关 属性 的 设置 都 是 固定 的 。 这 是 因为 HTML 中 
只 能 引用 Strict DTD、Transitional DTD 或 Frameset DTD 中 的 控制 标记 ， 且 HTML 并 
不 允许 网 页 设计 者 自行 创建 控制 标记 ， 所 以 控制 标记 的 数目 是 有 限 的 ， 设 计 者 在 充分 
了 解 每 个 控制 标记 的 功能 后 ， 就 可 以 设计 Web 页 面 了 。 

@ HTML 语法 较 弱 。 在 W3C 制定 的 HTML 5 规范 中 ， 对 于 HTML 5 在 语法 结构 上 的 规 
格 限制 是 较 松 散 的 ， 如 <HTML>、<Html> 或 <html> 在 浏览 器 中 具有 同样 的 功能 ， 是 不 
区 分 大 小 写 的 。 另 外 ， 也 没有 严格 要 求 每 个 控制 标记 都 要 有 相对 应 的 结束 控制 标记 ， 
如 标记 <tr > 时， 不 一 定 需要 结束 标记 </tr>。 


HTML 5 最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 的 ， 有 一 个 开头 
标记 和 一 个 结束 标记 。 结束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 杠 “/”。 当 浏览 器 收 到 HTML 
文件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相对 应 的 功能 表达 出 来 。 


1.1.3 HTML 5 文件 的 基本 结构 


完整 的 HTML 文件 包括 标题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 以 及 各 种 嵌入 对 象 ， 这 些 
对 象 统称 为 HTML 元 素 。 
HTML 5 文件 的 基本 结构 如 下 : 


<!DOCTYPE html> 

<html > 文件 开始 的 标记 
<head> 文 档 头 部 开始 的 标记 
.… 文 件 头 的 内 容 
</head> 文 档 头 部 开始 的 标记 
<body> 文 件 主体 开始 的 标记 
.… 文 档 主体 内 容 
</body> 文 件 主体 结束 的 标记 
</html> 文 件 结束 的 标记 


从 上 面 的 代码 可 以 看 出 ， 在 HTML 文件 中 ， 所 有 标记 都 是 对 应 的 ， 开 头 标记 为 “<>”， 
结束 标记 为 “< 请 ”， 在 这 两 个 标记 中 间 添 加 内 容 ， 这 些 基 本 标记 的 使 用 方法 及 详细 解释 会 在 
下 面 的 章节 呈现 。 


3 。 
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1.2 HTML 5 文件 的 编写 方法 


HTML 5 文本 的 编写 方法 有 两 种 ， 分 别 如 下 : 


@ 手工 编写 HTML 文件 。 
@ 使 用 HTML 编辑 器 。 


1.2.1 手工 编写 HTML 5 


由 于 HTML 5 是 一 种 标记 语言 ， 主 要 以 文本 形式 存在 ， 因 此 ， 所 有 的 记事 本 工具 都 可 以 
作为 它 的 开发 环境 。HTML 文件 的 扩展 名 为 .html 或 .htm， 将 HTML 源 代码 输入 到 记事 本 并 保 
存 之 后 ， 可 以 在 浏览 器 中 打开 文档 以 查看 其 效果 。 

【 例 1.2】 使 用 记事 本 编写 HTML 文件 

使 用 记事 本 编写 HTML 文件 的 具体 操作 步骤 如 下 。 


WO 单 击 Windows 桌面 上 的 “开始 ”按钮 ， 选 择 “ 所 有 程序 ”一 “附件 ”一 “记事 本 ” 
命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HTML 5 代码 ， 如 图 1-1 所 示 。 


< 村- 记 要 二 一 
区 件 们 志 坟 (5) 个 式 (D) 各 看 MI 大 雹 人 H) 
<:DOCTYPE FIL> 
<html》 


/p> 
s another paragraph. C/p> 


图 1-1 编辑 HTML 代码 

to3 编辑 完 HTML 5 文件 后 ， 选 择 “ 文 件 ” 一 “保存 ”命令 一 或 按 Ctrl+S 快捷 键 ， 在 弹 

出 的 “另存 为 ”对 话 框 中 ， 选 择 “保存 类 型 ”为 “所 有 文件 ”， 然 后 将 文件 扩展 名 设 为 .html 
或 .htm， 如 图 1-2 所 示 。 

GO ra, oo » | | 2 er D| 


时 党” 吉 建 ws 大 EFE* © 
EEC Ee 地 


震 计 EN | 


六 tN 手工 病 SHTNILhonl 
RMT | 


ae em 


1-2 “另存 为 ”对 话 框 
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tQ3j 单 击 “保存 ”按钮 保存 文件 。 打 开 网 页 文档 ， 在 浏览 器 中 预览 效果 ， 如 图 1-3 所 示 。 


(OD ma 


登 Dx\ 淹 代 柚 \cho\ 手 工 . x 


文 寺 昌 。” 壮 启 日 ” 豆 看 (V) 收藏 夫 (A) 工 间 (D)。 帮 有 动 (H) 


My First Heading 


This is a heading 
This is a heading 


My first paragraph. 


This is another paragraph. 


图 1-3 网 页 的 浏览 效果 


以 


注意 
1.2.2 ”使 用 HTML 编辑 器 


有 提示 。 


使 用 HTML 编辑 器 可 以 弥补 记事 本 编写 HTML 文件 的 缺陷 ,目前 ,有 很 多 专门 编辑 


使 用 记事 本 可 以 编写 HTML 文件 ， 但 是 编写 效率 太 低 ， 对 于 语法 错误 及 格式 都 没 


HTML 


网 页 的 编辑 器 ， 其 中 ，Adobe 公司 出 品 的 Dreamweaver CS5.5 用 户 界 面 非常 友好 ， 是 一 款 非常 


优秀 的 网 页 开发 工具 ， 并 深 受 广大 用 户 的 喜爱 。Dreamweaver CS5.5 的 主 界面 如 图 1-4 


加 


所 示 。 
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图 1-4 Dreamweaver CS5.5 的 主 界面 
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1. 文档 窗口 


文档 窗口 位 于 界面 的 中 部 , 它 是 用 来 编排 网 页 的 区 域 , 与 在 浏览 器 中 的 结果 相似 。 在 文档 
窗口 中 ， 可 以 将 文档 分 为 三 种 视图 显示 模式 。 


@ 代码 视图 。 使 用 代码 视图 ， 可 以 在 “文档 ”窗口 中 显示 当前 文档 的 源 代码 ， 也 可 以 在 
该 窗口 中 直接 键入 HTML 代码 。 

@ 设计 视图 。 在 设计 视图 中 ， 无 须 编辑 任何 代码 ， 可 直接 使 用 可 视 化 的 操作 编辑 网 页 

@ 拆 分 视图 。 在 拆 分 视图 中 ， 左 半 部 分 显示 代码 视图 ， 右 半 部 分 显示 设计 视图 。 在 这 种 
视图 模式 下 ， 可 以 通过 键入 HTML 代码 ， 直 接 观 看 效果 ， 还 可 以 通过 设计 视图 插入 对 
象 ， 直 接 查 看 源 文件 。 


在 各 种 视图 间 切 换 ， 只 需 在 文档 工具 栏 中 单 击 相应 的 视图 按钮 即 可 ， 文 档 工具 栏 如 图 1-5 


所 示 。 
i |) si pe 和 -pe 
Nx 在 浏览 器 中 预览/ 调试 文档 称 是 


图 1-5 文档 工具 栏 


2. “插入 ”面板 


“插入 ”面板 是 在 设计 视图 下 ,使 用 频 度 很 高 的 面板 之 一 。 插 入 面板 默认 打开 的 是 “常用 ” 
选项 ， 它 包括 最 常用 的 一 些 对 象 ， 例 如 ， 在 文档 中 的 光标 位 置 插入 一 段 文本 、 图 像 或 表格 等 。 
用 户 可 以 根据 需要 切换 到 其 他 选项 ， 如 图 1-6 所 示 。 


ab ore IE 
| 


Spry 
jQuery Wobile 
{Iscontext zaitine 


图 1-6 插入 面板 包含 的 页 
3. “属性 ”面板 
“属性 ”面板 中 主要 包含 当前 选择 的 对 象 相关 属性 设置 。 可 以 通过 单 击 菜单 栏 中 的 “窗口 ” 
一 “属性 ”命令 或 Ctrl+F3 组 合 键 ， 打 开 或 关闭 “属性 ”面板 。 
“属性 ”面板 是 常用 的 面板 ， 因 为 无 论 要 编辑 哪个 对 象 的 属性 ， 都 要 用 到 它 。 其 内 容 也 会 
随 着 选择 对 象 的 不 同 而 改变 , 例如 ， 当 光标 定位 在 文档 体 文字 内 容 部 分 时 ，“ 属 性 ”工具 栏 显 
示 文字 相关 属性 ， 如 图 1-7 所 示 。 
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图 1-7 文字 对 象 的 “属性 ”面板 


Dreamweaver CS5.5 中 还 有 很 多 面板 ， 在 以 后 使 用 时 ， 再 作 详细 讲 解 。 打 开 的 面板 越 多 ， 
编辑 文档 的 区 域 会 越 小 ， 为 了 方便 编辑 文档 ， 可 以 通过 F4 功能 键 快 速 隐藏 和 显示 所 有 面板 。 
【 例 1.3】 使 用 Dreamweaver CS5.5 编写 HTML 文件 
具体 操作 步骤 如 下 。 


和 Y 启动 Dreamweaver CS5.5， 如 图 1-8 所 示 ， 在 “欢迎 ”对 话 框 的 “新 建 ”选项 组 中 选 
择 “HTML” 选 项 。 或 者 单 击 菜单 中 的 “文件 ”一 “新 建 ” 命令 ( os CtrlHN ) 。 


RC 


图 1-8 包含 欢迎 屏幕 的 主 界面 
四 名 弹出 “新 建文 档 ” 对 话 框 ， 如 图 1-9 所 示 ， 在 “页 面 类 型 ”选项 组 中 选择 HTML。 


图 1-9 “新 建文 档 ” 对 话 框 
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tO3j 单 击 创建 “创建 ”按钮 ， 创 建 HTML 文件 ， 如 图 1-10 所 示 。 


EE 3 加 
ioD mW 


图 1-10 在 设计 视图 下 显示 创建 的 文档 
四 和 在 文档 工具 栏 中 ， 单 击 “ 代 码 ”选项 卡 ， 切 换 到 代码 视图 ， 如 图 1-11 所 示 。 
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图 1-11 在 代码 视图 下 显示 创建 的 文档 

tog 修改 HTML 文档 标题 ， 将 代码 中 <title> 标 记 中 的 “无 标题 文档 ”修改 成 “我 的 第 一 
个 网 页 ”。 

to6j 在 <body> 标 记 中 键入 “今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 
觉 非常 高 兴 。”， 完 整 HTML 代码 如 下 所 示 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtmll1/ 
DTDAhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 

<title> 第 一 个 网 页 </title> 

</head> 
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<body> 
今天 我 使 用 Dreamweaver CS5.5 编写 了 第 一 个 简单 网 页 ， 感 觉 非常 高 兴 。 
</body> 
</lhtml> 


0 辆 保存 文件 。 单 击 菜单 “文件 ”一 “保存 ”命令 或 按 下 CtrltS 快捷 键 弹出 “另存 为 ” 
对 话 框 。 在 对 话 框 中 选择 保存 位 置 ， 并 输入 文件 名 ， 单 击 “ 保 存 ” 按 钮 ， 如 图 1-12 所 示 。 

t@8j 单 击 文档 工具 栏 中 的 力图 标 , 选择 查看 网 页 的 浏览 器 ， 或 按 下 F12 功能 键 使 用 默认 
浏览 器 查看 网 页 ， 预 览 效 果 如 图 1-13 所 示 。 


p; FE 医治 
外 了 司 DNR\chol\Dr 人 D - 纪 X | 个 务 - 个 由 K 
文件 月 ”各 名 (E) 。 豆 看 (V) 效 荐 闪 (A) 工具 (D) 。 帮助 (H) 
今天 我 使 用 Dreamweaver CS5 .5 编写 了 第 一 个 简单 网 页 ， 
六 一 感觉 非常 高 兴 。 
时 
WW 
HL 
的 i ] F 
ee - EEea 
人 nn 生硬 下 
Unieode 标准 化 表单) 。 5 ( 蚁 丰 妥 闻 ， 后 中 全 记 ) ER 
iced 苍生 Qu 机 
图 1-12 保存 文件 图 1-13 浏览 器 预览 效果 


1.3 使 用 浏览 器 查看 HTML 5 文件 


浏览 器 查看 效果 与 HTML 源 代码 是 开发 者 经 常 使 用 的 。 使 用 浏览 器 查看 网 页 的 显示 效果 ， 
也 可 以 在 浏览 器 中 直接 查看 HTML 源 代码 。 
1.3.1 与 HTML 5 兼容 的 浏览 

浏览 器 是 网 页 的 运行 环境 , 因此 浏览 器 的 种 类 在 网 页 设计 时 一 定 会 遇 到 。 由 于 各 个 软件 厂 
商 对 HTML 的 标准 支持 有 所 不 同 ， 导 致 了 同样 的 网 页 在 不 同 的 浏览 器 下 会 有 不 同 的 表现 。 

另外 ， 对 HTML 5 新 增 的 功能 ， 各 个 浏览 器 的 支持 程度 也 不 一 致 ， 浏 览 器 的 因素 变 得 比 
以 往 传 统 的 网 页 设计 更 重要 。 

目前 ， 市 场 上 的 浏览 器 种 类 繁多 ，Internet Explorer (以 下 简称 正 ) 是 占 绝对 主流 的 ， 因 
此 ,本 书 主要 使 用 IE 9.0 作 为 主要 浏览 器 .不 过 , 遇 到 正 浏 览 器 不 能 支持 的 效果 , 将 使 用 Firefox、 
Opera 或 者 其 他 能 支持 的 浏览 器 来 说 明 ， 请 读者 注意 。 


1.3.2 ”查看 页 面 效果 
双击 前 面 编写 的 HTML 文件 ， 在 正 9.0 浏览 器 窗口 中 可 以 看 到 编辑 的 HTML 页 面 效果 ， 


请 参阅 图 1-3 或 图 1-13。 
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前 面 已 经 介绍 过 , 网 页 可 以 在 不 同 的 浏览 器 中 查看 , 为 了 测试 网 页 的 兼容 性 , 可 以 在 不 同 
的 浏览 器 中 打开 网 页 。 

在 非 默 认 浏 览 器 中 打开 网 页 的 方法 有 很 多 种 ， 在 此 为 读者 介绍 两 种 常用 方法 。 

@ 方法 一 : 选择 浏览 器 菜单 “文件 ”一 “打开 ”( 有 些 浏 览 的 菜单 项 名 为 “打开 文件 ”)， 
选择 要 打开 的 网 页 即 可 。 

@ 方法 二 : 在 HTML 文件 上 单 击 和 鼠标 右 键 ， 在 弹出 的 快捷 菜单 中 选择 “打开 方式 ”菜单 
命令 ， 单 击 需要 的 浏览 器 ， 如 图 1-14 所 示 。 如 果 浏 览 器 没有 出 现在 菜单 中 ， 选 择 “ 选 
择 程序 (C) ...” 选 项 ， 在 计算 机 中 查找 浏览 器 程序 。 
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图 1-14 选择 浏览 器 打开 网 页 
1.3.3 ”查看 源 文 件 
查看 网 页 源 代码 的 常见 方法 有 以 下 两 种 。 


@ 在 打开 的 页 面 空 白 处 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜 中 选择 “查看 源 文件 ”菜单 命令 ， 
如 图 1-15 所 示 。 


图 1-15 选择 “查看 源 文件 ”菜单 命令 
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@ 在 浏览 器 菜单 栏 上 选择 “查看 ”一 “ 源 文件 ”菜单 ， 如 图 1-16 所 示 可 以 查看 源 文件 。 
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图 1-16 选择 “ 源 文件 ”菜单 命令 


【 由 于 浏览 器 的 规定 各 不 相同 , 有 些 浏览 器 将 “查看 源 文件 ”命名 为 “查看 源 代 码 ”， 
但 是 操作 方法 完全 相同 。 


1.4 问题 解答 


1. 为 何 使 用 记事 本 编辑 的 HTML 文件 打开 时 不 是 在 浏览 器 中 打开 ,而 是 直接 在 记事 本 中 
打开 ? 

很 多 初学 者 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 缀 ， 导 
致 文件 还 是 以 .txt 为 扩展 各， 因此， 无 法 在 浏览 器 中 查看 。 如 果 读者 是 通过 单 击 右键 ， 在 弹出 
的 快捷 菜单 中 创建 记事 本 文件 的 , 在 给 文件 重 命名 时 ， 一 定 要 以 .html 或 .htm 作为 文件 的 后 级 。 
特别 要 注意 的 是 当 Windows 系统 的 扩展 名 是 隐藏 的 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 
“文件 夹 选项 ”对 话 框 中 查看 是 耕 显示 扩展 名 。 


2. 怎样 让 Dreamweaver CS6 欢迎 屏幕 显示 或 隐藏 ? 

Dreamweaver CS5.5 欢迎 屏幕 可 以 帮助 使 用 者 快速 进行 打开 文件 、 新 建文 件 和 打开 相关 帮 
助 文件 的 操作 。 如 果 读 者 不 希望 显示 该 窗口 ， 可 以 按 下 Ctrl+U 快捷 键 ， 在 弹出 的 窗口 中 选择 
左 侧 的 “常规 ”选项 ， 将 “文档 选项 ”部 分 的 “显示 欢迎 屏幕 ” 勾 选 取消 即 可 。 
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HTML 5 中 的 新 增 元 素 


HTML 5 中 新 增 了 大 量 的 元 素 与 属性 , 这 些 新 增 的 元 素 和 属性 使 HTML 5 的 功能 变 得 更 强 
大 ， 使 网 页 设计 效果 有 了 更 多 的 实现 可 能 。 


2:1 


新 增 的 主体 结构 元 素 


在 HTML 5 中 新 增 了 几 种 新 的 与 结构 相关 的 元 素 , 分 别 是 section 元 素 、article 元 素 、aside 
元 素 、nav 元 素 和 time 元 素 。 


section 元 素 


<section> 标 签 定义 文档 中 的 节 ， 比 如 章节 、 
h2、h3、h4、h5、h6 等 元 素 结合 起 来 使 用 ， 


section 标签 的 代码 结构 如 下 : 


<section> 


</section> 
【 例 2.1】《 实 例文 件 ，ch02\2.1.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<section> 

<h2>section 元 素 使 用 方法 </h2> 


页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 以 与 
显示 文档 结构 。 


<p>section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 


</section> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-1 所 示 ， 实 现 了 内 容 的 分 块 显示 。 


国 huserswdninis P- CX 


| section 元 素 使 用 方法 


ssction 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 
行 分 类。 


图 2-1 程序 运行 结果 
2.1.2 ”article 元 素 


<article> 标 签 定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 外 部 的 新 闻 提 供 者 的 一 篇 新 文章 、 来 
自 Blog 的 文本 、 来 自 论坛 的 文本 ， 或 者 是 来 自 其 他 外 部 源 的 内 容 。 
<article> 标 签 的 代码 结构 如 下 : 


【 例 2.2】〔 实 例文 件 ，ch02\2.2.html) 
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eas 
JAN AN 
OS) ©)] HAUsersAdminist PD ~ OC X | @ Hi\Users\Administr 
文件 (有 ) 。 辛 短 (E) 于 看 (V) 。 收 营 夫 内 工具 (D) 帮 动 (H) 


apple 教 程 


时 间 ，2013-2-1 


轻松 学 习 apple 教 程 ， 就 来 
YER. apple. com 


底部 版 权 信息 : apple. coa 公 司 所 有 


图 2-2 程序 运行 结果 
这 个 实例 讲述 article 元 素 使 用 方法 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 标题 下 
部 的 p 元 素 中 , 嵌入 了 一 段 正文 内 容 , 在 结尾 处 的 footer 元 素 中 霸 入 了 文章 的 著作 权 作 为 脚注 。 
整个 示例 的 内 容 相对 比较 独立 、 完 整 ， 因 此 ， 对 这 部 分 内 容 使 用 了 article 元 素 。 


1. article 元 素 与 section 元 素 的 区 别 
下 面 再 来 介绍 一 下 article 元 素 与 section 元 素 的 区 别 。 
【 例 2.3】 (实例 文件 :ch02\2.3.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<hl>article 元 素 与 section 元 素 的 使 用 方法 </h1> 
<p> 何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 …</p> 
<section> 
<h2>article 元 素 使 用 方法 </h2> 
<p>article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 的 内 容 。 


</section> 
<section> 
<h2>section 元 素 使 用 方法 </h2> 
<p>section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 
</section> 
</article> 
</body> 
</html> 


在 焉 9.0 中 的 预览 效果 如 图 2-3 所 示 ， 可 以 清楚 地 看 到 这 两 个 元 素 的 区 别 。 
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me Fe 区 要 
兮 月 | = | | 
WE H\UsersAdminist P = © X | 久 HAUsersAdministr.. x | 


文件 (站 ” 淆 沪 (可 看 V) 次 营 关 (A) 工具 (D) 项 动 (H) 
article 元 素 与 section 元 素 的 使 用 方法 
何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 …. . 
article 元 素 使 用 方法 


article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的、 可 以 
独自 被 外 部 引用 的 内 容 。 


section 元 素 使 用 方法 
section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。 


图 2-3 程序 运行 结果 
2. article 元 素 的 嵌 套 


article 元 素 是 可 以 棋 套 使 用 的 ， 内 层 的 内 容 在 原则 上 需要 与 外 层 的 内 容 相 关联 。 例 如 ， 在 
-篇 博客 文章 中 , 针对 该 文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 来 表示 ; 用 来 呈现 评论 
的 article 元 素 被 包含 在 表示 整体 内 容 的 article 元 素 里 面 。 
【 例 2.4】“《 实 例文 件 ，ch02\2.4.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<header> 
<hl>article 元 素 的 恢 套 </hl> 
<p> 发 表 日 期 : <time pubdate="pubdate">2012/10/10</time></p> 
</header> 
<p>article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? …… </p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2011-12-23T:21-26:00">1 小 时 前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 顶 一 下 ! </p> 
</article> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2013-2-20 T:21-26:00">1 小 时 前 </time></p> 
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</header> 
<p> 这 篇 文章 很 不 错 啊 </p> 
</article> 
</section> 
</article> 
</body> 
</html> 


在 IE9.0 中 的 预览 效果 如 图 2-4 所 示 。 
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图 2-4 程序 运行 结果 


这 个 实例 中 的 代码 比较 完整 , 它 添加 了 读者 的 评论 内 容 ， 实例 内 容 分 为 几 个 部 分 ,文章 标 
题 放 在 了 header 元 素 中 ， 文 章 正文 放 在 了 header 元 素 后 面 的 p 元 素 中 ，section 元 素 把 正文 与 
评论 进行 了 区 分 (是 一 个 分 块 元 素 ， 用 来 把 页 面 中 的 内 容 进行 区 分 ) ， 在 section 元 素 中 媒 入 


了 评论 的 内 容 ， 每 一 个 人 的 评论 相对 又 是 比较 独立 的 、 完 整 的 ， 


评论 的 article 元 素 中 ， 又 可 以 分 为 标题 与 评论 内 容 部 分 ， 分 别 放 在 header 元 素 与 p 元 素 中 。 


2.1.3 aside 元素 


因此 使 用 一 个 article 元 素 , 在 


aside 元 素 一 般 用 来 表示 网 站 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 
主要 内 容 相关 的 广告 、 导 航 条 、 引 用 、 侧 边栏 评论 部 分 ， 以 及 其 他 区 别 于 主要 内 容 的 部 分 。 


aside 元 素 主要 有 以 下 两 种 使 用 方法 。 


@ 被 包含 在 article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文章 


有 关 的 相关 资料 、 名 次 解释 等 。 
aside 标签 的 代码 结构 如 下 所 示 : 


<article> 
<h1>...</hl> 


<p>...</p> 
<aside>...</aside> 


@ 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 其 
中 的 内 容 可 以 是 友情 链接 ， 博 客 中 的 其 他 文章 列表 、 广 告 单 元 等 。 


aside 标签 的 代码 结构 如 下 所 示 : 


【 例 2.5】〔 实 例文 件 ，ch02\2.5.html) 
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</aside> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-5 所 示 。 


(3 个 HNUsersAdminist ”CX | 碟 夺权 文件 
文件 中 。 并 总 (E) 。 豆 看 (V) 收 荐 关 (A) ”工具 (帮助 (H) 


站 点 主 标 题 


图 2-5 程序 运行 结果 


<aside> 元 素 可 以 位 于 示例 页 面 的 左边 或 右边 ， 并 没有 预定 义 的 位 置 ， 可 位 于 布局 
的 任意 部 分 ， 用 于 表示 任何 非 文档 主要 内 容 的 部 分 。 例 如 ， 可 以 在 <section> 元 素 

提 示 。 中 加 入 <aside> 元 素 ， 甚至 可 以 把 该 元 素 加 入 一 些 重要 信息 ， 如 文字 引用 。<aside> 
元 素 仅仅 描述 所 包含 的 信息 ， 而 不 反映 结构 。 


2.1.4 nav 元 素 


<nav> 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 时 
对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 

具体 来 说 ，nav 元 素 可 以 用 于 以 下 场合 。 

@ 传统 导航 条 : 现在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 作 用 是 将 当前 画面 跳 转 到 其 他 
主页 上 。 

@ 侧 边 栏 导航 : 现在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当 
前 文章 或 当前 商品 跳 转 到 其 他 文章 或 其 他 商品 页 上 。 

@ 页 内 导航 : 页 内 导航 的 作用 是 在 本 页 的 组 成 部 分 之 间 进 行 跳 转 。 

@ 翻 页 操作 : 翻 页 操作 是 指 在 网 站 的 多 个 页 面 的 前 后 页 面 或 博客 网 站 的 前 后 篇 文章 之 间 
滚动 。 

具体 实现 代码 如 下 : 


提 示 

一 个 页 面 中 可 以 拥有 多 个 <nav> 元 素 ， 作 为 页 面 整体 或 不 同 部 分 的 导航 ， 下 面 给 出 一 个 代 
码 实 例 。 

【 例 2.6】〈 实 例文 件 ，ch02\2.6.html) 
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<section id="CSS 3"> 
<hl>CSS 3 的 历史 </hl> 
<p> 讲 述 CSS 3 的 历史 的 正文 <p> 
</section> 
<footer> 
p> 
<a href="?edit"> 已 往 版 本 </a>| 
<a href="?delete"> 当 前 现状 </a>| 
<a href="?rename"> 未 来 前 景 </a> 
</p> 
</footer> 
</article> 
<footer> 
<p><small> 版 权 所 有 : 青花 瓷 <small></p> 
</footer> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-6 所 示 。 


pr 
|e a: Dc PD - © XB ucereAdniiarmor I A 
Tn WE BEV) CE TART uO) 
技术 资料 
"直下 
, 问 疝 


HTML 5 与 CSS 3 的 历史 


， HDLL 5 的 历史 
CS 区 押 由 


HT 5 的 历史 

讲述 HTML 5 的 历史 的 正文 
Css 3 的 历史 

训 玉 Css 3 和 历史 的 正文 
版 权 所 有 * 青花 次 


图 2-6 程序 运行 结果 


(7 eran 可 以 看 到 <nav> 不 仅 可 以 作为 页 面 的 全 局 导航 ， 也 可 以 放 在 
提示 <article> 标 签 内 ， 作 为 单 篇 文章 内 容 的 相关 导航 链接 到 当前 页 面 的 其 他 位 置 。 
人 J\ 


[六 在 HTML 5 中 不 要 用 menu 元 素 代 替 nav 元 素 ，menu 元 素 是 用 在 一 系列 发 出 命令 


的 菜单 上 的 , 是 一 种 交互 性 的 元 素 , 或 者 更 确切 地 说 是 使 用 在 Web 应 用 程序 中 的 。 
半 套 


2.1.5 time 元 素 


<time> 是 HTML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 
的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 
datetime 设 为 相应 的 时 间或 日 期 即 可 。 

具体 实现 代码 如 下 : 


【 例 2.7】 实例 文件 ，ch02\2.7.html) 
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Sp> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-7 所 示 。 


Ca 司 HAuserswdminist P - © X | @ HUsersadministr.. 
文件 (F) 六 通 [E) ”到 看 V) ” 妆 砷 突 (A) ”工具 (T) 帮助 (H) 


Time 元 素 
今天 是 2013 年 3 月 17 日 
现在 时 间 是 2013 年 3 月 17 日 晚上 5 点 


新 款 冬装 将 于 今年 年 底 上 市 
本 消息 发 布 于 2013 年 3 月 15 日 


图 2-7 程序 运行 结 

说 明 : 

@ <p> 元 素 中 id 号 为 pl 的 <time> 元 素 表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 
datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 显示 在 页 面 中 。 

@ <p> 元 素 中 id 号 为 p2 的 <time> 元 素 表 示 的 是 日 期 和 时 间 , 使 用 字母 进行 分 隔 。 如 果 
在 整个 日 期 与 时 间 后 面 加 字母 Z， 则 表示 获取 的 是 UTC (世界 统一 时 间 ) 格式 。 

@ <p> 元 素 中 id 号 为 p3 的 <time> 元 素 表示 的 是 将 来 时 间 。 

@ <p> 元 素 中 id 号 为 p4 的 <time> 元 素 表 示 的 是 发 布 日 期 。 


(7 为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 pubdate 
注意 属性 ， 表 示 此 日 期 为 发 布 日 期 。 


@! <time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 , 是 一 个 布尔 值 , 该 属 
性 不 仅 可 以 用 于 <time> 元 素 ， 还 可 用 于 <article> 元 素 。 


提 示 


2.2 ”新 增 的 非 主体 结构 元 素 


在 HTML 5 中 还 新 增 了 一 些 非 主体 的 结构 元 素 ， 如 header、hgroup、footer 等 。 


2.2.1 header 元 素 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 , 通常 用 来 放置 整个 页 面 或 页 面 内 的 内 
容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 例 如 数据 表格 、 搜 索 表单 或 相关 的 logo 图 片 。 


“22 。 


header 标签 的 代码 结构 如 下 : 


在 整个 页 面 中 标题 一 般 放 在 页 面 的 开头 ， 一 个 网 页 中 没有 限制 header 元 素 的 个 数 ， 可 以 
拥有 多 个 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 
【 例 2.8】 《实例 文件 :ch02\2.8.html) 


图 2-8 程序 运行 结果 
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2.2.2 ”hgroup 元 素 

<hgroup> 标 签 用 于 对 网 页 或 区 段 (section) 的 标题 进行 组 合 。hgroup 元 素 通 常会 将 hl 一 
h6 元 素 进行 分 组 ， 壁 如 将 一 个 内 容 区 块 的 标题 及 其 子 标题 分 为 一 组 。 

hgroup 标签 的 使 用 代码 如 下 : 


通常 , 如 果 文 章 只 有 一 个 主 标题 , 是 不 需要 hgroup 元 素 的 。 下 面 这 个 实例 就 不 需要 hgroup 
元 素 。 
【 例 2.9】〔 实 例文 件 ，ch02\2.9.html) 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<h1> 文 章 标题 <h1> 
<p><time datetime="2010-03-20">2010 年 10 月 29 日 </time></p> 
</header> 
<p> 文 章 正 文 </p> 
</article> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-9 所 示 。 


FE 区 可 

天 天王 
Kk ye 国 HAUsersAdminist PD - © X | @ HAUsers administr. 
文件 (有 )” 编 强 (E) 下 看 (V) 收 惹 闪 (A) 工具 (T) 帮助 (H) 

二 

文章 标题 

2013 年 10 月 29 日 

文章 正文 


图 2-9 程序 运行 结果 
但 是 , 如 果 文 章 有 主 标题 和 子 标题 , 就 需要 使 用 hgroup 元 素 。 如 下 这 个 实例 就 需要 hgroup 


元 素 。 
【 例 2.10】《〈 实 例文 件 : ch02\2.10.html) 


在 IE 9.0 中 的 预览 效果 如 图 2-10 所 示 。 


< 站 HAUsersAdminist D ~ © X | @ HAUsers administr.. 
文件 (站 ” 蝙 纺 (E) 吾 看 (V) 收藏 闪 (A) 工具 (D)。 帮 动 (H) 


文章 主 标题 


文章 子 标题 
2013 年 10 月 29 日 
文章 正文 


图 2-10 程序 运行 结果 
2.2.3 footer 元 素 


footer 元 素 可 以 作为 其 上 层 父 级 内 容 区 块 或 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 区 
块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 
使 用 footer 标签 设置 文档 页 脚 的 代码 如 下 : 


oe 
在 HTML 5 出 现 之 前 ， 网 页 设计 人 员 使 用 下 面 的 方式 编写 页 脚 。 


HTMmL 


【 例 2.11】 实例 文件 :ch02\2.11.html) 


在 IE9.0 中 的 预览 效果 如 图 2-11 所 示 。 


图 2-11 程序 运行 结果 


但 是 到 了 HTML 5 之 后 , 这 种 方式 将 不 再 使 用 , 而 是 使 用 更 加 语义 化 的 footer 元 素来 替代 。 
【 例 2.12】 《实例 文件 ，ch02\2.12.html) 


在 焉 9.0 中 的 预览 效果 如 图 2-12 所 示 。 


enarinin P OX |S Hermanme 


图 2-12 程序 运行 结果 


提 示 
【 例 2.13】“〈 实 例文 件 ，ch02\2.13.html) 


在 IE 9.0 中 的 预览 效果 如 图 2-13 所 示 。 
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7 EE 

ke I 人 9) ©| HAUsers\Administ PD ” CO X | EHi\Users\Administr 
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文章 内 容 

文章 | 
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分 段 内 容 的 脚注 


图 2-13 程序 运行 结果 
2.2.4 figure 元 素 


figure 元 素 是 一 种 元 素 的 组 合 ， 可 带 有 标题 (可 选 ) 。figure 元 素 用 来 表示 网 页 上 一 块 独 
立 的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产 生 影 响 。figure 所 表示 的 内 容 可 以 
是 图 片 、 统 计 图 或 代码 示例 。 

figure 元 素 的 实现 代码 如 下 : 


C7 使 用 figure 元 素 时 , 需要 用 figcaption 元 素 为 figure 元 率 组 添加 标题 。 不过, figure 
注音 元 素 内 最 多 只 允许 放置 一 个 figcaption 元 素 ， 其 他 元 素 可 无 限 放置 。 


1. 不 带 标题 的 figure 元 素 的 使 用 
【 例 2.14】 不 带 标题 的 figure 元 素 的 使 用 (实例 文件 ，ch02\2.14.html) 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 不 带 有 标题 的 figure 元 素 </title> 
</head> 
<body> 
<figure> 
<img alt="images/logo.jpg"/> 
</figure> 
</body> 
</html> 


第 2 齐 


在 IE9.0 中 的 预览 效果 如 图 2-14 所 示 。 


图 2-14 程序 运行 结果 
2. 带 有 标题 的 figure 元 素 的 使 用 
【 例 2.15】 带 有 标题 的 figure 元 素 的 使 用 实例 文件 ，ch02\2.15.html) 


在 IE 9.0 中 的 预览 效果 如 图 2-15 所 示 。 


< 同志 Figure 寺 


图 2-15 程序 运行 结果 


和 
[Re] 
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3. 多 张 图 片 用 同一 标题 的 figure 元 素 的 使 用 


【 例 2.16】 多 张 图 片 用 同一 标题 的 figure 元 素 的 使 用 实例 文件 :ch02\2.16.html) 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 多 张 图 片 ， 同 一 标题 的 figure 元 素 </title> 
</head> 
<body> 
<figure> 
<img alt="images/logo.jpg"/> 
<img alt="images/logol.jpg" 亡 
<img alt="images/logo2.jpg" 伺 
</figure> 
<figcaption> 标 题 提示 </figcaption> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-16 所 示 。 
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标题 提示 


图 2-16 程序 运行 结果 


2.2.5 ”address 元 素 


址 、 


address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 作者 或 文档 维护 者 姓名 
电子 邮箱 、 真 实地 址 和 电话 号 码 等 。 
address 元 素 的 实现 代码 如 下 : 


、 网 站 链接 地 


【 例 2.17】address 元 素 的 使 用 (实例 文件 : ch02\2.17.html) 


在 IE9.0 中 的 预览 效果 如 图 2-17 所 示 。 


全 museniin P -cx 


图 2-17 程序 运行 结果 


另外 ，address 元 素 不 仅 可 以 单独 使 用 ， 还 可 以 与 footer 元 素 、time 元 素 与 address 元 素 结 
合 起 来 使 用 。 
【 例 2.18】address 元 素 与 其 他 元 素 结合 使 用 (实例 文件 ，ch02\2.18.html) 
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发 表 于 <time datetime="2013-3-17">2013 年 3 月 17 日 time> 
</div> 
</footer> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-18 所 示 。 


Ny | HAUsersAdminist PD - © X | @ HA\UsersAdministr... 
文件 (F) 妨 儿 (EF) ” 重 看 V) ”收藏 突 (A) 工具 (T) 帮助 (H) 
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图 2-18 程序 运行 结果 
2.3 ”新 增 其 他 常用 元 素 


除了 结构 元 素 外 ， 在 HTML 5 中 ， 还 新 增 了 其 他 元 素 ， 如 progress 元 素 、command 元 素 、 
embed 元 素 、mark 元 素 和 details 元 素 等 。 


2.3.1 mark 元 素 


mark 元 素 主要 用 来 呈现 需要 突出 显示 或 高 亮 显示 的 文字 。mark 元 素 的 典型 应 用 是 在 搜索 
结果 中 向 用 户 高 亮 显示 搜索 关键 词 。 其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 但 相 比 而 言 ， 
HTML 5 中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 

HTML 5 中 代码 示例 : 


【 例 2.19】mark 元 素 的 使 用 《实例 文件 : ch02\2.19.html) 

在 页 面 中 ， 首 先 使 用 <h5> 元 素 创建 一 个 标题 “优秀 开发 人 员 的 素质 ”， 然 后 通过 <p> 元 素 
对 标题 进行 阐述 。 在 阐述 的 文字 中 , 为 了 引起 用 户 的 注意 ,使 用 <mark> 元 素 高 亮 处 理 字 符 “ 素 
质 ”、“ 过 硬 ” 和 “务实 ”等 字样 。 

具体 的 代码 如 下 : 


<!DOCTYPE html> 
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<html> 
<head> 
<meta charset="utf-8" /> 
<title>mark 元 素 的 使 用 </title> 
<link href="Css/css3.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<h5> 优 秀 开 发 人 员 的 <mark> 素 质 </mark></h5> 
<p class="p3_5"> 
一 个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具 有 
<mark> 过 硬 </mark> 的 技术 与 
<mark> 务 实 </mark> 的 专业 精神 
</p> 
</body> 
</html> 


该 页 面 在 IE 9.0 浏览 器 下 执行 的 效果 如 图 2-19 所 示 。 


Eee 
[4 A < ME) HUsersAdminist P - © x | 屋 mark 元 村 9 使 用 


文件 (F) ” 妨 强 (E) 到 看 (V) 站 营 突 (A) 工具 (T) 帮助 (H) 


优秀 开发 人 员 的 素质 


一 个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具 有 过 硬 的 技术 与 
务实 的 专业 精神 


图 2-19 程序 运行 结果 


0 <mark> 元 素 的 这 种 高 亮 显示 的 特征 ， 除 在 文档 中 突出 显示 外 ， 还 常用 于 查看 搜索 
结果 页 面 中 关键 字 的 高 亮 显示 ， 其 目的 主要 是 引起 用 户 的 注意 。 


提 示 
虽然 <mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 有 相似 之 处 ， 但 三 者 的 出 发 
点 是 不 一 样 的 。<strong> 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 的 强调 ; <em> 

注 意 元 素 是 作者 为 了 突出 文章 重点 而 进行 的 设置 ; <mark> 元 素 是 在 数据 展示 时 ， 以 高 
亮 形式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 

2.3.2 rp、rt 与 ruby 元 素 


ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 
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包括 可 选 的 rp 元 素 ， 定 义 当 浏览 器 不 支持 ruby 元 素 时 显示 的 内 容 。 
rp、 代 与 ruby 元 素 结合 使 用 的 代码 如 下 : 


<ruby> 
<r> <mp>(</p><rmp>)<hp> /rt> 
</ruby> 


【 例 2.20】 使 用 ruby 注释 繁体 字 “ 江 ”实例 文件 ，ch022.20.html) 


<!DOCTYPE html> 

<html> 

<body> 

<ruby> 

漠 <rt><mp>(</rp> 汉 <rp>)</rp></rt> 
</ruby> 

</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-20 所 示 。 


C3 国 HAUsersAdminist P - © X | @ HAUsersAdminis 
文件 (月 ” 编 强 (E) ”可 看 (V) ” 收 惹 突 (A) ”工具 (T) ”帮助 (H) 


并 


图 2-20 程序 运行 结果 


C9 支持 ruby 元素 的 浏览 器 不 会 显示 元 素 的 内 容 。 
提 示 
2.3.3 ”progress 元 素 


progress 元 素 表 示 运 行 中 的 进程 ， 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 
函数 进程 。 例 如 下 载 文 件 时 ， 文 件 下 载 到 本 地 的 进度 值 ， 可 以 通过 该 元 素 动 态 展 示 在 页 面 中 ， 
展示 的 方式 既 可 以 使 用 整数 〈 如 1 一 100) ， 也 可 以 使 用 百分比 〈 如 10% 一 100%) 。 

<progress> 元 素 的 属性 及 描述 如 表 2-1 所 示 。 
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表 2-1 <progress> 元 素 的 属性 及 描述 

描述 

设置 完成 时 的 值 ， 表 示 总 体 工作 量 
设置 正在 进行 时 的 值 ， 表 示 已 完成 的 工作 量 


<progress> 元 素 中 设置 的 value 值 必须 小 于 或 等 于 max 属性 值 ， 且 两 者 都 必须 


大. 
注 意 


【 例 2.21】 使 用 progress 元 素 表 示 下 载 进度 〈 实 例文 件 : ch02\2.21.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
对 象 的 下 载 进度 : 
<progress> 
<span id="objprogress">76</span>% 
</progress> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-21 所 示 。 


Eo--e- Es 


Ca) Husers Administ p - © x | E Husersy 


文件 站。 咏 编 (E) ”至 看 (V】 站 蕙 闪闪) 工具 (D 。 帮助 (H) 


对 象 的 下 载 进度 ， 76% 


2.3.4 command 元 素 


command 元 素 表示 用 户 能 够 调用 的 命令 ， 可 以 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 
按钮 。 
HTML 5 中 使 用 的 代码 : 


<command type="command">...... </command> 


【 例 2.22】 使 用 command 元 素 标记 一 个 按钮 (实例 文件 : ch02\2.22.html) 
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<!DOCTYPE HTML> 
<html> 
<body> 
<menu> 
<command onclick="alert('Hello World)">Click Me!</command> 
</menu> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-22 所 示 。 单 击 网 页 中 的 “Click Me” 区 域 ， 将 弹出 提示 信 
息 框 。 


a 本 到 到 尼 汉 
一 I Hi\UsersAdminist DP- OX | 大 Hi\UsersAdmi 


Click Me! 


1 Hello World 


图 2-22 程序 运行 结果 


CY 只 有 当 command 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的 ， 否 则 不 会 显示 这 
个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 。 


提 示 


2.3.5 _ embed 元素 


embed 元 素 用 来 插入 各 种 多 媒体 文件 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 
HTML 5 中 代码 示例 : 


【 例 2.23】 使 用 embed 元 素 插入 动画 《实例 文件 ,ch02\2.23.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<embed src="images/ 飞 翔 的 海 鸟 .swf" 户 
</body> 
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</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-23 所 示 。 


医 二 [区 本 
7 AR 
(3 /2 ] HAUsersAdminist PD ~ © X | @ Hi\Users\Administr, 
文件 (Fi ”篇 弓 (E) ”前 看 (V) ”收藏 夫 (A) 工具 (T) ”帮助 (H) 


图 2-23 程序 运行 结果 
2.3.6 details 与 summary 元 素 


details 元 素 表 示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 ， 与 summary 元 素 配 合 使 用 。 
summary 元 素 提供 标题 或 图 例 。 标题 是 可 见 的 , 用 户 单 击 标题 时 , 会 显示 出 细节 信息 。summary 
元 素 应 该 是 details 元 素 的 第 一 个 子 元 素 。 

HTML 5 中 代码 示例 : 


<details> 


</details> 
【 例 2.24】 使 用 details 元 素 制作 简单 页 面 〈 实 例文 件 : ch02\2.24.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<details> 
<summary> 苹 果 冰 激 凌 </summary> 
<img src="images/ 冰 激 凌 .jpg" alt=" 苹 果 冰 激 凌 "> 
<div> 
<h3> 材 料 : 苹果 500g， 白 糖 150g， 新 鲜 牛奶 两 瓶 。</h3> 
<p> 制 作 方法 : 将 苹果 洗 净 ， 去 皮 挖 核 ， 切 成 薄片 ， 搅 成 浆 状 ， 放 入 白糖 及 1000 克 开 水 ， 加 入 者 
沸 的 牛奶 ， 搅 拌 均匀 ， 倒 入 盛 器 内 冷却 后 置 于 冰箱 冻结 即 成 。 
</p> 
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</div> 
</details> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 2-24 所 示 。 


[5] 司 HAUsersAdminist P - © X [|@ HUsersAdministr. * 


文件 (F) ”顽强 (E) 下 看 (V) 次 若 实 (A) 工具 (T) 帮助 (H) 


半 果 水 法 奖 雪 
材料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。 
制作 方法 ， 将 苹果 洗 兆 ， 去 皮 挖 核 ， 切 成 薄片 ， 捞 成 效 状 ， 放 入 白 


糖 及 1000 克 开水 ， 加 入 者 沸 的 牛奶 ， 挠 拌 均 习 ， 倒 入 盛 器 内 冷却 后 
置 于 冰箱 冻结 即 成 。 


图 2-24 程序 运行 结果 


CY 默认 情况 下 ， 浏 览 器 支持 details 元 素 ， 除 了 summary 标签 外 的 内 容 将 会 被 隐藏 。 
提 示 


2.3.7 ”datalist 元 素 


datalist 用 来 辅助 文本 框 的 输入 功能 ， 它 本 身 是 隐藏 的 ， 与 表单 文本 框 中 的 list 属性 绑 定 ， 
即 可 将 list 属性 值 设 置 为 datalist 的 ID 号 ， 类 似 于 suggest 组 件 。 目 前 只 支持 opera 浏览 器 。 
HTML 5 中 代码 示例 : 


<datalist></datalist> 
【 例 2.25】 使 用 datalist 元 素 制作 下 列 列表 框 《〈 实 例文 件 : ch02\2.25.html) 


<!DOCTYPE HTML> 
<html> 
<head> 
<title>datalist 测试 </title> 
</head> 
<body> 
<form action="#"> 
<fieldset> 
<legend> 请 输入 职业 </legend> 
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<input type="text" list="worklist"> 
<datalist id="worklist"> 
<option value=" 程 序 开 发 员 "></option> 
<option value=" 系 统 架构 师 "></option> 
<option value=" 数 据 维护 员 "></option> 
</datalist> 
</fieldset> 
</form> 
</body> 
</html> 


|Ohapywwwopera x | D datalistRet 
和 A 人 om 哪 本 地 | localhost/H:/U 廊 
请 输入 职业 


| 
程序 开发 员 


系统 架构 师 愉 
数据 维护 员 


图 2-25 程序 运行 结果 
2.4 新 增 全 局 属性 


在 HTML 5 中 新 增 了 许多 全 局 属性 ， 下 面 来 详细 介绍 常用 的 新 增 属性 。 
2.4.1 contenteditable 属性 


Contenteditable 属性 是 HTML 5 中 新 增 的 标准 属性 ， 其 主要 功能 是 指定 是 否 允 许 用 户 编 辑 
内 容 。 该 属性 有 两 个 值 : true 和 false。 

Contenteditable 属性 为 true 时 表示 可 以 编辑 ， 为 false 时 表示 不 可 编辑 。 如 果 没 有 指定 值 
则 会 采用 隐藏 的 inherit (继承 ) 状态 ， 即 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 
的 。 

【 例 2.26】 使 用 contenteditable 属性 的 实例 实例 文件 ， ch02\2.26.html) 


<!DOCTYPE html> 

<head> 

<title>contenteditable 属性 示例 </title> 
</head> 
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<body> 

<h3> 对 以 下 内 容 进 行 编辑 内 容 </h3> 
<ol contenteditable="true"> 

<I 这 列表 一 </l 放 > 

<l> 列 表 二 <I> 

<li> 列 表 三 <li> 

</ol> 

</body> 

</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 2-26 所 


SG 区 本 
EC = ee 
“€ 2 全 | HANUsersAdminist 只 ~ CG X | contenteditable 黑 性 ..， 
文件 (月 ”入 强 (E) ”可 看 (V】 ”收藏 突 (A) ”工具 (T) 帮助 (H) 


对 以 下 内 容 进行 编辑 内 容 


图 2-26 程序 运行 结果 


【分 对 内 容 进行 编辑 后 ， 如 果 关 闭 网 页 ， 编 辑 的 内 容 将 不 会 被 保存 。 如 果 想 要 保存 其 
注意 内 容 ， 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 端 进行 保存 。 


2.4.2 spellcheck 属性 


spellcheck 属性 是 HTML 5 中 的 新 属性 ， 规 定 是 否 对 元 素 内 容 进 行 拼写 检查 。 可 对 以 下 
文本 进行 拼写 检查 : 类 型 为 text 的 input 元 素 中 的 值 ( 非 密码 ) 、textarea 元 素 中 的 值 、 可 
编辑 元 素 中 的 值 。 

【 例 2.27】 使 用 spellcheck 属性 的 实例 (实例 文件 ，ch022.27.html) 


<!DOCTYPE html> 
<html> 

<head> 

<title>hello, World</title> 
</head> 

<body> 
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<p contenteditable="true" spellcheck="true"> 使 用 spellcheck 属性 ， 使 段落 内 容 可 被 编辑 。</p> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 打 开 后 可 以 在 网 页 中 输入 相关 内 容 ， 效 果 如 图 2-27 所 
示 。 


[ee 
ea) Husersadminist p - © x | @ helio ,word 
文件 (沉香 (E) ”可 看 (V) 收藏 大 (A) 工 莫 (T) 帮助 (H) 


使 用 spellcheck 属 性 ， 使 段落 内 容 可 被 编辑 。 
你 好 ! 


图 2-27 程序 运行 结果 
2.4.3 tablndex 属性 


tabIndex 属性 可 设置 或 返回 按钮 的 Tab 键 控制 次 序 。 打 开 页 面 ， 连 续 按 下 Tab 键 ， 会 在 
按钮 之 间 切 换 ，tabIndex 属性 则 可 以 记录 显示 切换 的 顺序 。 
【 例 2.28】 使 用 tabIndex 属性 的 实例 (实例 文件 ，ch02\2.28.html) 


<html> 

<head> 

<script type="text/JavaScript"> 

function showTabIndex() 

{ 

var btl=document.getElementById('bt1').tabIndex:; 

var bt2=document.getElementById('bt2").tabIndex; 

var bt3=document.getElementById('bt3').tabIndex:; 
document.write("Tab 切换 按钮 1 的 顺序 : " + bt1); 
document.write("<br />"); 

document.write("Tab 切换 按钮 2 的 顺序 : " + bt2); 
document.write("<br />"); 

document.write("Tab 切换 按钮 3 的 顺序 : " + bt3); 
}</script> 

</head> 

<body> 

<button id="bt1" tabIndex="1"> 按 钮 1</button><br 户 
<button id="bt2" tabIndex="2"> 按 钮 2</button><br 户 
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<button id="bt3" tabIndex="3"> 按 钮 3</button><br 亡 

<br 户 

<input type="button" onclick="showTabIndex()" value=" 显 示 切 换 顺序 " > 
</body> 

</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 , 打开 后 多 次 按 下 Tab 键 , 使 控制 中 心 在 几 个 按钮 对 象 间 
切换 ， 如 图 2-28 所 示 。 


国 HAUsersAdminist P = © X | @ HaUsers administr) 
文件 ( 明 。 编 如 (E) ”前 看 (V) ”收藏 闪 (A) 工具 (帮助 (H) 


图 2-28 程序 运行 结果 
单 击 “ 显 示 切 换 顺序 ”按钮 ， 显 示 出 依次 切换 的 顺序 ， 如 图 2-29 所 示 。 


€] HAUsersAdminist DO - © X | @ HAUsers administr, 
文件 (月 ” 妨 铝 (E) ” 吾 看 (V) 收藏 闪 (A) 工具 (T) 帮助 (H) 
Tab 切 换 按钮 1 的 顺序 : 1 


Tab 切 换 按钮 2 的 顺序 : 2 
Tab 切 换 按钮 3 的 顺序 : 3 


图 2-29 程序 运行 结果 
2.5 新 增 的 其 他 属性 


HTML 5 中 新 增 属性 主要 分 为 三 大 类 : 表单 相关 的 属性 、 链 接 相 关 属性 和 其 他 新 增 属性 。 
2.5.1 表单 相关 的 属性 
新 增 的 表单 属性 有 很 多 ， 下 面 来 分 别 进行 介绍 。 
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1. autocomplete 


autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 .autocomplete 适 月 


于 <form> 


标签 ,以 及 以 下 类 型 的 <input> 标 签 : text、 search、 url、 telephone、email、 password、datepickers、 


range 和 color。 


【 例 2.29】 使 用 autocomplete 属性 的 实例 〈 实 例文 件 : ch02\2.29.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get" autocomplete="on"> 
姓名 :<input type="text" name=" 姓 名 " /><br /> 
性 别 :<input type="text" sex=" 性 别 " /><br /> 
邮箱 :<input type="email" name="email" autocomplete="off' /><br /> 

<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-30 所 示 。 


{ 2 \ \ Ps 一 一 
CAO 昌 bsu:eewdnnisp -cx | @ HUsers administr 
文件 (有 ] 。 咏 剖 (E) 。 豆 看 (V) 收藏 实 (A) 工具 (T) 帮助 (H) 

姓名 : 

性 别 : 


提交 查询 内 容 


图 2-30 程序 运行 结果 


2. autofocus 


[区 本 


autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。autofocus 属性 适用 于 所 有 <input> 


标签 的 类 型 。 


【 例 2.30】 使 用 autofocus 属性 的 实例 (实例 文件 ，ch02\2.30.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo _form.asp" method="get"> 


HTML 5 有 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-31 所 示 。 


DO ear oo] @ wrervani 
文件 (F) ” 编 强 (E) ”得 看 (V) 收藏 夫 (A) 工具 Tm) 


图 2-31 程序 运行 结果 
3. form 
form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。form 属性 适用 于 所 有 <input> 标 签 的 类 型 ， 


必须 引用 所 属 表单 的 id。 
【 例 2.31】 使 用 form 属性 的 实例 实例 文件 ，ch028.31.html) 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-32 所 示 。 
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mw [ee 
& Ss ) HAUsersAdminist PD - © X | @ husersAdmini 
文件 (月 ”六 强 (E) ”到 看 (V) 收藏 交 (A) 工具 (D) 帮助 (H) 

好 名 : 

性 别 : 


图 2-32 程序 运行 结果 


4.form overrides attributes 


表单 重 写 属性 (form override attributes) 允许 重 写 form 元 素 的 某 些 属性 设 定 。 表 单 重 写 属 
性 如 下 。 


@ formaction: 重 写 表 单 的 action 属性 
formenctype: 重 写 表 单 的 enctype 属性 
formmethod: 重 写 表单 的 method 属性 
formnovalidate: 重 写 表单 的 novalidate 属性 
formtarget: 重 写 表单 的 target 属性 


表单 重 写 属性 适用 于 以 下 类 型 的 <inpuf> 标 签 : submit 和 image。 
【 例 2.32】 使 用 表单 重 写 属性 的 实例 〈 实 例文 件 ，ch02\2.32.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get" id="user form"> 
邮箱 :<input type="email" name="userid" /><br 户 
<input type="submit" value=" 提 交 " 广 <br /> 
<input type="submit" formaction="demo_admin.asp" value=" 以 管理 员 身 份 提 交 " /><br /> 
<input type="submit" formnovalidate="true" value=" 提 交 未 经 验证 " /><br /> 
</form> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-33 所 示 。 
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(3 ) HAUsersAdminist PD - © X | @ HaUsersAdmini! 
文件 (月 。 六 妾 (5 豆 春 (V) 收 重 突 (A) 工具 (TD) 帮助 (H) 
邮箱 : 
提交 
以 管理 员 身 份 提交 
提交 未 经 验证 


图 2-33 ”程序 运行 结果 
5. height 和 width 


height 和 width 属性 用 于 规定 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。 
【 例 2.33】 使 用 height 和 width 属性 的 实例 〈 实 例文 件 ， ch02\2.33.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
用 户 名 :<input type="text" name="user name" /><br /> 

<input type="image" sre="/images/ 按 钮 .jpg" width="99" height="99" /> 
</form> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-34 所 示 。 


§] HA\UsersAdminist P » © X | @ Hi\Users Administr, 
文件 (月 痴 壬 (E) 可 看 (V) 收藏 突 /A) 工具 (T) 帮助 (H) 
用 户 名 : 


图 2-34 ”程序 运行 结果 


6. list 
list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。list 属性 适用 于 以 下 类 型 的 


<input> 标 签 : text、search、url、telephone、email、date pickers、number、range 和 color。 
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【 例 2.34】 使 用 list 属性 的 实例 〈 实 例文 件 : ch02\2.34.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo_form.asp" method="get"> 

主页 :<input type="url" list="url list" name="link" 人 

<datalist id="url list"> 
<option label="baidu" value="http:/www.baidu.com'" /> 
<option label="qq" value="http://www.qq.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 

<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-35 所 示 。 


eer 


aa 
E38) Hvsers wdminist p ~ © x | @ Hvsersadminist 
文件 (有 ”六 缠 (E) 下 看 (V) 。 收 项 闪 (A) 工具 (T) 才 动 (H) 


主页 : 提交 查询 内 容 


图 2-35 程序 运行 结果 


7. max、min 和 step 


max、min 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 〈 约 束 ) 。max 属性 
规定 输入 域 所 允许 的 最 大 值 ，min 属性 规定 输入 域 所 允许 的 最 小 值 ，step 属性 为 输入 域 规定 合 


法 的 数字 间隔 〈 如 果 step="3"， 则 合法 的 数 是 -3、0、3、6 等 ) 。 


max、min 和 step 属性 适用 于 以 下 类 型 的 <input> 标 签 : date pickers、number 以 及 range。 


【 例 2.35】 使 用 min、max 和 step 属性 的 实例 〈 实 例文 件 : ch02\2.35.html) 


<!DOCTYPE HTML> 
<html> 


HTmL 5 h i E 


图 2-36 程序 运行 结果 


8. multiple 
multiple 属性 规定 输入 域 中 可 选择 多 个 值 。multiple 属性 适用 于 以 下 类 型 的 <input> 标 签 ; 
email 和 file。 
【 例 2.36】 使 用 multiple 属性 的 实例 实例 文件 ，ch028.36.html) 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-37 所 示 。 
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提 


标签 : 


pd N= 一 一 
3 国 HAUsersAdminist P - GX 上 屋 HUsersadmin 
文件 (六 和 (E) 豆 看 W)。 改 宣 闪 A) 工具 (和 二 (H) 
选择 图 片 : 
提交 查询 内 容 


图 2-37 程序 运行 结果 


单 击 “浏览 ”按钮 ， 可 以 打开 “选择 要 加 载 的 文件 ”对 话 框 ， 在 其 中 选择 要 添加 


示 


9. pattern (regexp) 


pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern ) 。pattern 属性 适用 于 以 下 类 型 的 <input> 


text、search、url、telephone、email 和 password。 


【 例 2.37】 使 用 pattern 属性 的 实例 〈 实 例文 件 : ch02\2.37.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
电话 区 号 :<input type="text" name="country_code" pattern="[A-z]{3}" 
title="Three letter country code" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-38 所 示 。 


人 国 HAUsersAdminist PD - © X | @ HNuserswdmir 


文件 (有 六 强 (E) 下 看 (V) 站 天 闪 (A) 工具 (D) 。 帮助 (H) 
电话 区 号 : 提交 喜光 内 容 


2-38 ”程序 运行 结果 
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10. placeholder 


placeholder 属性 提供 一 种 提示 (hint) ， 描 述 输入 域 所 期 待 的 值 。placeholder 属性 适用 于 
以 下 类 型 的 <input> 标 签 : text、search、url、telephone、email 以 及 password。 
【 例 2.38】 使 用 placeholder 属性 的 实例 〈 实 例文 件 : ch02\2.38.html) 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo_form.asp" method="get"> 
<input type="search" name="user_search" placeholder="baidu" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-39 所 示 。 


ET 区 本 


@ HUsers Wdmin 


HAUsersAdminist PD” © Xx 


图 2-39 程序 运行 结果 
11. required 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 〈 不 能 为 裤 ) 。required 属性 适用 于 以 下 类 
型 的 <input> 标 签 : text、 search、 url, telephone、 email、 password、 date pickers、number、checkbox、 
radio 以 及 file。 

【 例 2.39】 使 用 required 属性 的 实例 (实例 文件 ，ch022.39.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
姓名 :<input type="text" name="usr_name" required="required" 广 
<input type="submit" /> 
</form> 
</body> 
</html> 
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使 用 下 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-40 所 示 。 


C 国 HAUsers\Administ D = © X | 车 Hi\UsersAdmin 
文件 月 泣 纤 (E) 二 看 (V) 次 坝 关 (A 工具 TT) 吉 动 (H) 


奴 各 : 


图 2-40 程序 运行 结果 
2.5.2 ”链接 相关 属性 


下 面 介绍 新 增 的 与 链接 相关 的 属性 。 
1. media 属性 


media 属性 规定 目标 URL 是 为 哪 种 类 型 的 媒介 /设备 进行 优化 的 ， 只 能 在 href 属性 存在 时 


使 用 。 
【 例 2.40】 使 用 media 属性 的 实例 (实例 文件 ，ch022.40.html) 


“IDOCTYPE HTML> 
<html> 
<body> 
<a href="www.baidu.com" media="print and (resolution:300dpi)"> 
链接 查询 . 
</a> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-41 所 示 。 


司 HUsersAdminist D » © x | @ Husersadmin 
文件 四。 六 壮 E)。 王 看 V) 。 效 硬 闪 [A) 工具 (Tm) 剖 芭 (H) 


链接 查询 


2-41 ”程序 运行 结果 
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2.type 属性 


在 HTML 5 中 ， 为 area 元 素 增加 了 type 属性 ， 规 定 目标 URL 的 MIME 类 型 。 仅 在 href 
属性 存在 时 使 用 。 

语法 结构 如 下 : 

<input type="value"> 

3. sizes 属性 

为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性 ) ， 该 
属性 指定 关联 图 标 (icon 元 素 ) 的 大 小 。 

4.target 属性 


为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 。 
【 例 2.41】 使 用 sizes 与 target 属性 的 实例 〈 实 例文 件 : ch02\2.41.html) 


<!DOCTYPE html> 
<html> 
<head> 
<link rel="icon" href="demo _icon.ico" type="image/gif" sizes="16X 16" /> 
</head> 
<body> 
<h2>Hello world!</h2> 
<p> 打 开 <a href="2.40.html" target=" blank"> 新 链接 </a> 窗 口 。</p> 
</body> 
</html> 


使 用 IE 9.0 浏览 器 查看 网 页 内 容 ， 如 图 2-42 所 示 。 


D 
| Hvsers aminist p ~ © x | @ Hvsersaarm 
文件 (站 注 汽 E) 理 看 IV) 收 写 (A) 工具 TT 帮 屿 1H) 


Hello world! 
打开 新 链接 窗口 。 


图 2-42 程序 运行 结果 
2.5.3 ”其 他 属性 
除了 以 上 介绍 的 与 表单 和 链接 相关 的 属性 外 , HTML 5 还 增加 了 其 他 属性 , 如 表 2-2 所 示 。 
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表 2-2 HTML 5 其 他 属性 


属性 隶属 于 意义 

reversed ol 元 素 指定 列表 倒序 显示 

charset meta 元 素 为 文档 字符 编码 的 指定 提供 一 种 比较 良好 的 方式 

type menu 元 素 让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 的 三 种 形式 出 现 
label menu 元 素 为 菜单 定义 可 见 的 标注 

scoped style 元 素 用 来 规定 样式 的 作用 范围 ， 壁 如 只 对 页 面 上 某 个 树 起 作用 


async script 元 素 定义 脚本 是 否 异 步 执行 
开发 离线 Web 应 用 程序 时 与 API 结合 使 用 ， 定 义 一 个 URL， 在 这 
个 URL 上 描述 文档 的 缓存 信息 


iframe 元 素 用 来 提高 页 面 安全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 


manifest html 元 素 


sandbox 、 srcdoc 与 
Seamless 


2.6 新 增 事件 属性 


HTML 5 元 素 可 拥有 事件 属性 ， 这 些 属 性 在 浏览 器 中 触发 行为 ， 比 如 当 用 户 单 击 一 个 
HTML 5 元 素 时 启动 一 段 JavaScript。 在 HTML 4.01 的 基础 上 , HTML 5 新 增 了 一 些 事件 属性 ， 
可 以 把 它们 插入 HTML 标签 来 定义 事件 行为 。 表 2-3 给 出 了 这 些 新 增 的 事件 属性 。 


表 2-3 新 增 的 事件 属性 


属性 隶属 于 描述 

onabort script 元 素 发 生 abort 事件 时 运行 脚本 

onbeforeonload | script 元 素 在 元 素 加 载 前 运行 脚本 

oncontextmenu | script 元 素 当 菜单 被 触发 时 运行 脚本 

ondrag script 元 素 只 要 脚本 在 被 拖 动 就 运行 脚本 

ondragend script 元 素 在 拖 动 操作 结束 时 运行 脚本 

ondragenter script 元 素 当 元 素 被 拖 动 到 一 个 合法 的 放置 目标 时 ， 执 行 脚本 
ondragleave script 元 素 当 元 素 离开 合法 的 放置 目标 时 


ondragover script 元 素 只 要 元 素 正在 合法 的 放置 目标 上 拖 动 时 ， 就 执行 脚本 
ondragstart script 元 素 在 拖 动 操作 开始 时 执行 脚本 


ondrop script 元 素 当 元 素 正在 被 拖 动 时 执行 脚本 
onerror script 元 素 当 元 素 加 载 的 过 程 中 出 现 错误 时 执行 脚本 


onmessage script 元 素 当 message 事件 触发 时 执行 脚本 
onmousewheel | script 元 素 当 鼠 标 滚轮 滚动 时 执行 脚本 


onresize script 元 素 当 元 素 调 整 大 小 时 运行 脚本 
onscroll script 元 素 当 元 素 滚动 条 被 滚动 时 执行 脚本 
onunload script 元 素 当 文 档 外 载 时 运行 脚本 


需要 注意 ，HTML 5 不 再 支持 HTML 4.01 的 onreset 属性 。 
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2.7 ”废除 的 属性 


在 HTML 5 中 废除 了 很 多 不 需要 再 使 用 的 属性 ， 这 些 属性 将 采用 其 他 属性 或 其 他 方案 进 
行 末代， 具体 内 容 如 表 2-4 所 示 。 


表 2-4 HTML 5 废除 的 属性 
废除 的 属性 使 用 该 属性 的 元 素 。 “| 在 HTML 5 中 代 蔡 的 方案 
linlea 在 被 链接 的 资源 中 使 用 HTTP content-type 头 元 素 
link 多 余 属性 ， 被 省 略 
head 多 余 属性 ， 被 省 略 
html 多 余 属性 ， 被 省 略 
mm 
| seme | 个 表 人 用 scheme 


archive,classid,codebase, 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 些 属 
ct 
odopebalaeuidts | 性 来 设置 参数 时 ， 使 用 param 属性 


valuetype,type [valuetypetype |paam | 使 用 name 与 value 属性 ， 不 声明 值 的 MIME 类 型 


使 用 以 明确 简洁 的 文字 开头 ， 后 跟 详 述 文字 的 形势 。 
容 变 得 简短 
|scope |(4 | 在 被 链接 的 资源 中 使 用 HTTPContent-type 头 元 素 
caption,input,legend, 


align _ 使 用 CSS 样式 表 进行 替代 
div,h1,h2,h3,h4,h5,h6,p 


alink,link,text,vlink,back i 
body 使 用 CSS 样式 表 进行 替代 
ground,bgcolor 


align,bgcolor,border,cell 
padding,cellspacing, table 使 用 CSS 样式 表 进 行 替代 


frame,rules,width 


align,char,charoff,height 


tbody,thead,tfoot 使 用 CSS 样式 表 进 行 奉 代 
,nowrap,valign 


align,bgcolor,char,charof 
fheight,nowrap, td,th 使 用 CSS 样式 表 进 行 替代 
valign,width 
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( 续 表 ) 
废除 的 属性 使 用 该 属性 的 元 素 在 HTML 5 中 代 蔡 的 方案 
align,bgcolor,char,charof 和 

使 用 CSS 样式 表 进 行 奉 代 
fvalign 
align,char,charoff,valign 
col,colgroup 使 用 CSS 样式 表 进行 替代 
,width 
align,border,hspace,vspa i 
object 使 用 CSS 样式 表 进行 替代 
ce 
clear br 使 用 CSS 样式 表 进 行 替 代 
compact,type oLuLli 使 用 CSS 样式 表 进行 奉 代 


[eompact |a [使 用 Css 样 式 表 进行 符 代 
[eve me 人 ss 样式 过 行人 
一 CSS 样式 表 进 行 普 代 
im CSS 样式 表 进 行 蔡 代 


ee 代表 过 行人 


align,frameborder,scrolli 
ngmarginheight, i CSS 样式 表 进 行 蔡 代 


marginwidth 


2.8 问题 解答 


1. HTML 5 中 的 单 标记 和 双 标记 书写 方法 是 什么 ? 

HTML 5 中 的 标记 分 为 单 标记 和 双 标 记 。 所 谓 单 标记 是 指 没 有 结束 标记 的 标签 ， 双 标记 
指 既 有 开始 标记 又 有 结束 标记 的 标签 。 

对 于 单 标 记 不 允许 写 结束 标记 的 元 素 ， 只 允许 使 用 “< 元 素 />” 的 形式 进行 书写 。 例 如 
“<br>.….</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br/>。 当 然 ， 在 HTML 5 之 前 的 版 
本 中 ，<br> 这 种 书写 方法 可 以 被 沿用 。HTML 5 中 不 允许 写 结束 标记 的 元 素 有 : area、base、 
br 、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、 
wbr。 

对 于 部 分 双 标 记 ， 可 以 省 略 结束 标记 。HTML 5 中 允许 省 略 结束 标记 的 元 素 有 li、dt、dd、 
p、 rt、 rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

HTML 5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 方 
式 存 在 的 。HTML 5 中 允许 省 略 全 部 标记 的 元 素 有 html、head、body、colgroup、tbody。 

2. 新 增 属性 Target 在 HTML 4.01 与 HTML 5 之 间 的 差异 有 哪些 ? 


在 HTML 5 中 ,不 再 允许 把 框架 名 称 设 定 为 目标 ， 因 为 不 再 支持 frame 和 frameset。Self、 
parent 以 及 top 这 三 个 值 大 多 数 时 候 与 iframe 一 起 使 用 。 
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在 网 络 高 速 发 展 的 今天 , 网 站 已 经 成 为 展示 自我 、 宣 传 自我 的 工具 。 公 司 或 个 人 可 以 拥有 
自己 的 网 站 ， 可 以 向 别人 介绍 自己 ， 展 示 自 己 ， 这 些 都 离 不 开 HTML 网 页 。 


3.1 网 站 的 基本 概念 


当 进 入 一 个 网 站 时 ， 首 先 呈 现 出 来 的 就 是 网 页 ， 网 页 是 承载 各 种 网 站 信息 的 平台 。 网 页 上 
可 以 有 图 片 、 文 字 、 音 频 和 视频 等 构成 网 站 的 基本 元 素 。 


3.1.1 什么 是 网 页 


网 页 (Web page) 是 一 个 文件 ， 它 存放 在 计算 机 中 ， 而 这 台 计 算 机 必须 是 与 互联 网 相连 
的 。 网 页 是 由 网 址 (URL, 例如 www.sohu.com) 来 识别 与 存 取 的 ， 当 在 浏览 器 中 输入 网 址 后 ， 
网 页 文件 会 被 传送 到 正在 浏览 网 页 的 计算 机 中 , 然后 再 通过 浏览 器 对 网 页 内 容 进行 解释 , 再 展 
示 给 网 页 浏览 者 ， 网 页 通常 是 HTML 格式 〈 文 件 扩展 名 为 .html 或 .htm) 。 

在 一 个 网 站 中 , 网 页 按照 类 型 不 同 , 可 以 分 为 两 种 , 即 主页 和 普通 网 页 。 主页 (Home Page) 
是 进入 网 站 的 开始 画面 ， 如 搜狐 网 站 的 首页 ， 如 图 3-1 所 示 。 


FT 


图 3-1 搜狐 网 站 主页 


3.1.2 ”什么 是 网 站 

网 站 (WebSite) 是 指 根据 一 定 的 规则 ， 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 的 相 
关 网 页 的 集合 ， 例 如 常见 的 网 站 有 搜狐 、 新 浪 等 。 

简单 地 说 ,网 站 就 像 布告 栏 一 样 ， 人 们 可 以 通过 网 站 发 布 资讯 信息 , 或 者 利用 网 站 提供 的 
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相关 的 网 络 服务 。 衡 量 网 站 的 性 能 通常 从 网 站 空间 大 小 、 网 站 位 置 、 网 站 连接 速度 〈 俗 称 “ 网 
速 ” )、 网 站 软件 配置 、 网 站 提供 的 服务 等 几 方 面 考虑 ,最 直接 的 衡量 标准 是 网 站 的 真实 流量 。 


3.2 ”网 页 基本 构成 元 素 


在 早期 ， 网 站 只 能 保存 纯 文 本 。 后 来 经 过 不 断 的 发 展 ， 图 像 、 声 音 、 动 画 、 视 频 和 3D 技 


术 等 已 经 在 因特网 上 广泛 应 用 , 并 且 通 过 动态 网 页 技术 , 用 户 可 以 与 其 他 用 户 或 者 网 站 管理 者 
进行 交流 。 


常见 的 网 页 构成 元 素 有 文本 、 图 像 、 超 链接 、 表 格 、 表 单 、 导 航 栏 、 动 画 、 框 架 等 ， 如 图 


3-2 所 示 。 
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图 3-2 网 页 常见 构成 元 素 

@ 文本 : 网 页 中 的 信息 主要 以 文本 为 主 。 在 网 页 中 可 以 通过 字体 、 大 小 、 颜 色 、 底 纹 、 
边框 等 来 设计 文本 的 属性 。 

@ 图 像 : 有 了 图 像 ， 才 能 看 到 丰富 多 彩 的 网 页 。 网 页 上 图 片 多 为 JPG 或 GIF 格式 。 通常 
图 片 会 被 运用 在 Logo、Banner 和 背景 图 上 。Logo 是 代表 企业 形象 或 栏目 内 容 的 标志 
性 图 片 ， 一 般 在 网 页 的 左上 角 。Banner 是 用 于 宣传 网 站 内 某 个 栏目 或 活动 的 广告 ， 一 
般 要 求 制作 成 动画 形式 ， 达 到 宣传 的 效果 。Banner 一 般 位 于 网 页 的 顶部 和 底部 。 在 网 
页 页 面 中 比较 常用 的 图 片 还 包括 背景 图 ， 但 要 慎 用 。 

@ 超 链 接 : 超 链接 是 网 站 的 灵魂 ， 从 一 个 网 页 指向 另 一 个 目的 端的 链接 。 目 的 端 通常 是 
一 个 网 页 ， 但 也 可 以 是 一 幅 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 、 一 个 程序 或 者 是 本 
网 页 中 的 其 他 位 置 ， 超 链接 本 身 可 以 是 文字 或 者 图 片 。 

@ 表格 : 是 网 页 中 展现 数据 的 主要 方式 ， 能 够 以 表 的 形式 显示 数据 信息 。 表 格 也 可 以 用 
作 网 页 排版 ， 在 很 长 一 段 时 间 内 ， 使 用 表格 排版 是 网 站 的 首选 方式 。 

@ 表单 : 表单 是 用 来 收集 站 点 访问 者 信息 的 集合 。 站 点 访问 者 填写 表单 的 方式 是 输入 文 
本 、 单 击 单 选 按钮 与 复 选 框 ， 以 及 从 下 拉 菜 单 中 选择 选项 。 在 填 好 表单 后 ， 站 点 访问 
者 便 送 出 所 输入 的 数据 ， 该 数据 就 会 根据 网 站 设计 者 所 设置 的 表单 处 理 程序 ， 以 各 种 
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不 同 的 方式 进行 处 理 。 

@ 导航 栏 : 导航 栏 是 一 组 超 链 接 ， 一 般 用 于 网 站 各 部 分 内 容 间 相 互 链接 的 指引 。 导 航 栏 
可 以 是 按钮 或 者 文本 超 链 接 。 

@ 动画 : 动画 是 网 页 上 最 活跃 的 元 素 ， 包 括 GIF 动画 和 Flash 动画 。 


@! 网 页 中 除了 这 些 最 基本 元 素 外 ， 还 包括 横幅 广告 、 字 幕 、 是 停 按 钮 、 计 数 器 、 音 
提示 频 和 视频 等 。 
、 


MN 


3.3 网 页 设计 


网 页 设计 , 是 网 站 建设 行业 内 的 专业 术语 , 作为 客户 , 若 能 了 解 更 多 的 网 站 设计 基础 知识 ， 
在 进行 网 站 建设 过 程 中 就 不 会 显得 被 动 、 无 助 ， 而 且 能 更 好 地 与 项 目 负责 人 进行 沟通 交流 ， 以 
满足 自己 的 设计 需求 。 


3.3.1 网 页 设计 概述 


网 页 设计 是 网 页 创作 过 程 ， 是 建立 在 Intemet 上 的 新 型 设计 。 它 具有 很 强 的 视觉 效果 、 互 
动 性 、 互 操作 性 等 其 他 媒体 所 不 具有 的 特点 。 

-个 成 功 的 网 页 设计 ， 首 先 在 观念 上 要 确立 动态 的 思维 方式 ， 其次， 要 有 效 地 将 图 形 引入 
网 页 中 , 提高 人 们 浏览 网 页 的 兴趣 , 在 崇尚 鲜明 个 性 风格 的 今天 , 网 页 设计 应 增加 个 性 化 因素 。 
例如 搜狐 网 页 中 的 视频 网 站 地 图 ， 如 图 3-3 所 示 。 
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电影 
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纪录片 
信物 | 社会 | 历史 | 军事 | 自然 | 时 经 | 帮 后 | 影 全 中 国 | 行走 去 下 | 伟业 | 者 寺 要 


付费 
电影 | 教育 | 名 月 二 区 | TO 用 污 区 
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图 3-3 视频 地 图 显示 


网 页 设计 融合 了 IT 技术 与 美术 设计 两 个 方面 。 因此 ,对 从 业 人 员 来 说 , 仅 掌 握 IT 技术 是 
不 够 的 ， 还 需要 有 一 定 的 美术 功底 与 审美 能 力 。 而且， 网 页 设计 傻瓜 软件 正在 日 益 普及 , 技术 
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早已 不 是 这 个 领域 的 唯一 门槛 。 在 这 种 情况 下 , 美术 功底 和 审美 能 力 是 决定 成 为 什么 级 别 的 网 
页 设计 师 的 关键 因素 。 


3.3.2 ”网 页 设计 特点 
网 页 设计 有 下 面 几 个 特点 。 
1. 交互 性 与 持续 性 


网 页 被 创建 出 来 后 ， 上 传 到 网 站 ， 用 户 就 可 以 浏览 和 欣赏 了 。 通 常 为 了 吸引 用 户 注意 ， 需 
要 定时 更 新 网 页 内 容 , 例如 更 新 新 闻 、 股 票 信息 等 。 在 更 新 过 程 中 ， 其 版 面 设计 可 能 会 由 于 内 
容量 的 多 少 ， 版 面 发 生变 化 ， 这 时 就 需要 网 页 设计 者 保持 一 个 连续 的 设计 风格 。 

有 的 网 页 为 了 及 时 获取 最 新 与 论 信息 ,通常 都 存在 HTML 留言 表单 。 浏 览 者 登录 网 页 后 ， 
发 布 自 己 的 言论 信息 。 面 对 每 天 都 在 增长 的 评论 内 容 , 网 页 设计 者 也 需要 保持 一 个 版 面 的 设计 
风格 。 例 如 下 面 的 页 面 ， 对 某 一 主题 ， 浏 览 者 在 不 同时 间 进 行 评论 ， 内 容 不 断 增 多 ， 但 其 版 面 
效果 不 会 发 生变 化 ， 如 图 3-4 所 示 。 
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图 3-4 发 表 评论 


有 的 网 站 在 使 用 了 一 段 时 间 后 ， 其 风格 不 再 吸引 人 ， 这 时 就 面临 着 整个 网 站 的 改版 问题 ， 
相对 于 前 面 网 站 不 能 变化 太 大 ， 也 需要 保持 视觉 形象 上 的 持续 性 。 

与 报纸 等 传统 传媒 布局 设计 相 比 较 , 可 以 发 现 , 报纸 排版 完成 后 只 需 出 版 , 不 再 具有 重新 
排版 布局 的 可 能 ， 而 网 页 不 一 样 ， 由 于 需要 和 浏览 者 不 断交 互 ， 因 此 需要 不 断 排版 和 布局 ， 甚 
至 每 隔 一 定时 间 ， 还 需要 版 本 升级 。 

2. 多 维 性 


HMTL 网 页 的 最 吸引 人 之 处 ， 就 是 存在 超级 链接 。 正 是 因为 有 了 超级 链接 ， 浏 览 者 才 可 
以 在 不 同 页 面 之 间 ， 任 意 跳 转 。 可 以 想象 ， 如 果 HTML 网 页 ， 没 有 了 超级 链接 ， 那 只 能 按 看 
书 的 方式 浏览 网 页 ， 首 先 在 目录 中 找到 这 个 网 页 地 址 ， 然 后 再 看 ， 看 完了 再 返回 去 。 超 级 链接 
的 出 现 , 大 大 丰富 了 页 面 之 间 的 联系 。 超 级 链接 可 以 将 页 面 组 织 结构 分 为 序列 结构 、 层 次 结构 、 


HTMmL 5 从 零 开 始 学 视频 教学 版 ) 


网 状 结构 、 复 合 结构 等 。 例 如 百度 首页 ， 就 是 层次 结构 ， 单 击 页 面 中 任意 一 个 超级 链接 ， 可 以 
进入 此 类 网 页 查看 ， 如 图 3-5 所 示 。 
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图 3-5 百度 网 站 首页 
网 站 中 ， 一 个 合理 的 页 面 导航 可 以 帮助 浏览 者 迅速 找到 目标 网 页 。 导 航 需要 提供 足够 的 、 
不 同 角度 的 链接 ， 帮 助 浏览 者 在 网 页 各 个 部 分 跳 转 ， 并 告知 浏览 者 所 在 位 置 、 当 前 页 面 和 其 他 
页 面 之 间 的 关系 等 。 通 过 超级 链接 ， 可 以 链接 到 不 同 页 面 ， 这 就 是 网 页 设计 的 多 维 性 特点 。 
3. 多 种 媒体 综合 性 


在 创建 网 页 时 ,不 仅仅 要 考虑 文本 元 素 , 还 需要 考虑 图 像 、 音 频 和 视频 等 元 素 ， 只 有 这 样 
才能 将 网 页 设计 得 动感 十 足 。 随 着 硬件 技术 的 提高 , 例如 网 络 带 宽 增 加 、 芯片 处 理 速度 加 快 等 ， 
将 来 还 需要 考虑 3D 元 素 的 增加 。 在 数据 压缩 技术 的 改进 和 流 技术 的 推动 下 ， 网 上 出 现 了 实时 
的 音频 和 视频 服务 ， 例 如 在 线 音乐 、 网 上 电影 等 ， 如 图 3-6 所 示 。 
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多 种 媒体 综合 运用 是 网 页 设计 的 特点 之 一 ， 也 是 网 页 设计 者 必须 要 考虑 的 元 素 之 一 。 
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4. 版式 不 可 控 性 


网 页 版 式 设计 存在 许多 不 可 控 因素 , 首先 网 页 设计 者 创建 的 网 页 , 在 不 同 的 浏览 器 中 运行 
时 ， 可 能 会 存在 差异 。 其 次 ， 网 页 技术 在 不 断 发 展 ， 如 有 一 个 网 站 ， 用 Firefox 浏览 器 显示 如 
图 3-7 所 示 。 可 以 发 现 图 片 周边 区 域 间隔 比较 大 ， 但 在 IE 浏览 器 中 会 发 现 ， 图 片 四 周 没 有 间 
除 ， 如 图 3-8 所 示 。 
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图 3-7 用 Firefox 浏览 器 显示 图 3-8 用 正 浏 览 器 显示 


这 一 切 说 明 ， 网 络 应 用 尚 处 在 发 展 之 中 ， 很 难 制 订 出 统一 的 标准 ， 这 必然 导致 网 页 版 式 设 
计 的 不 可 控 性 。 其 具体 表现 为 : 


网 页 页 面 会 根据 当前 浏览 器 窗口 大 小 ， 自 动 格式 化 输出 。 

@ 网 页 浏览 者 可 以 控制 网 页 在 浏览 器 中 的 显示 方式 。 

@@ 用 不 同 种 类 、 版 本 的 浏览 器 观察 同一 个 网 页 页 面 时 ， 效 果 会 有 所 不 同 。 
@ 用 户 浏览 器 工作 环境 不 同 ， 显 示 效 果 也 会 有 所 不 同 。 


把 所 有 这 些 问题 归结 为 一 点 , 即 网 页 设计 者 无 法 控制 页 面 在 用 户 端的 最 终 显示 效果 , 但 这 
也 正 是 网 页 设计 的 吸引 人 之 处 。 


5. 技术 与 艺术 结合 的 紧密 性 


设计 是 主观 和 客观 共同 作用 的 结果 , 是 在 自由 和 不 自由 之 间 进 行 的 , 设计 者 不 能 超越 自身 
已 有 经 验 和 所 处 环境 提供 的 客观 条 件 限制 ,优秀 设计 者 正 是 在 掌握 客观 规律 基础 上 得 到 了 完全 
的 自由 ， 拥 有 了 想象 和 创造 的 自由 。 

在 网 页 设计 的 过 程 中 , 网络 技 术 主要 表现 为 客观 因素 ， 艺 术 创意 主要 表现 为 主观 因素 ,网 
页 设计 者 应 该 积极 主动 地 掌握 现 有 的 各 种 网 络 技术 规律 , 注重 技术 和 艺术 紧密 结合 , 这样 才 能 
穷尽 技术 之 长 ， 实 现 艺术 想象 ， 满 足 浏览 者 对 网 页 信息 的 高 质量 需求 。 

例如 , 浏览 者 要 欣赏 一 段 音乐 或 电影 , 以 前 必须 先 将 这 段 音乐 或 电影 下 载 到 本 地 计算 机 的 
磁盘 当中 ,然后 使 用 相应 的 程序 来 播放 才能 实现 ,又 由 于 音频 或 视频 文件 都 比较 大 , 需要 较 长 
的 下 载 时 间 。 但 是 ， 当 流 (Stream) 技术 出 现 以 后 ， 网 页 设计 者 充分 、 巧 妙 地 应 用 此 技术 ， 让 
浏览 者 在 下 载 过 程 中 就 可 以 欣赏 这 段 音 乐 或 电影 ,实现 了 实时 的 网 上 视频 直播 服务 和 在 线 欣 赏 
音乐 服务 ， 无 疑 增强 了 页 面 传播 信息 的 表现 力 和 感染 力 ， 如 图 3-9 所 示 。 
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图 3-9 技术 和 艺术 相 结合 

3.3.3 ”网 页 设计 相关 术语 
学 习 网 页 设计 时 会 涉及 一 些 专业 术语 ， 本 节 将 对 这 些 术语 进行 详细 介绍 。 
1. 万 维 网 


万 维 网 (World Wide Web) 缩写 为 WWW 或 简称 3W， 它 是 无 数 个 网 络 站 点 和 网 页 的 集 
合 ,也 是 Internet 提供 的 最 主要 的 服务 。 它 是 由 多 媒体 链接 而 形成 的 ， 当 用 户 单 击 超级 链接 时 ， 
会 通过 URL 直接 指向 要 显示 页 面 ， 如 图 3-10 所 示 。 


图 3-10 万 维 网 的 应 用 


2. Web 服务 器 和 客户 端 

WWW 基于 客户 机 /服务 器 模式 ， 与 平台 无 关 。 客 户 机 和 服务 器 都 是 独立 的 计算 机 ， 客 户 
机 是 浏览 者 使 用 的 机 器 ， 服 务 器 是 存放 网 络 服务 的 计算 机 。 如 果 一 台 连 入 网 络 的 计算 机 ， 向 其 
他 计算 机 提供 各 种 网 络 服务 〈 如 数据 、 文 件 的 共享 等 ) 时 ， 它 就 被 称 作 服务 器 。 而 那些 用 于 访 
问 服务 器 资料 的 计算 机 则 被 称 为 客户 机 ， 其 结构 模式 如 图 3-11 所 示 。 
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1. 向 服务 端 发 出 请 求 


we 4 
加 | | 2. 服 务 右 端 对 请 求 做 出 响应 


ee 堪 Le 
上 一 | = 
客户 机 服务 器 


图 3-11 客户 机 与 服务 器 模式 


通常 ,服务 器 对 于 浏览 Web 站 点 的 用 户 是 透明 的 ，Web 服务 器 传送 HTML 页 面 使 浏览 器 
可 以 浏览 。 确 切 一 点 ，Web 服务 器 专门 处 理 客户 机 请 求 (request) ， 处 理 完 请 求 之 后 ， 会 将 
这 些 请 求 发 送 到 客户 端 , 例如 返回 一 个 HTML 页 面 、 一 个 图 像 等 .为 了 处 理 一 个 请 求 (request)， 
Web 服务 器 可 以 响应 〈response) 一 个 静态 页 面 或 图 片 ， 进 行 页 面 跳 转 (redirect) 。 客 户 机 主 
要 享受 网 络 上 提供 的 各 种 资源 。 

3. 客户 端 浏览 器 

浏览 器 是 一 种 软件 ,可 以 显示 网 页 文件 内 容 , 例如 显示 文本 信息 、 显 示 图 像 、 播 放 音频 和 
视频 等 ,大 部 分 的 浏览 器 能 够 扩展 众多 插件 (plug-ins) 。 另外, 许多 浏览 器 还 支持 其 他 的 URL 
类 型 及 其 相应 的 协议 ， 例 如 FTP、Gopher、HTTPS (HTTP 协议 的 加 密 版 本 ) 。 

HTTP 内 容 类 型 和 URL 协议 规范 允许 网 页 设计 者 在 网 页 中 嵌入 图 像 、 动 画 、 视 频 、 声 音 、 
流 媒 体 等 。 浏览 器 在 操作 系统 中 是 独立 存在 的 , 读者 可 以 根据 喜好 ， 在 操作 系统 中 安装 不 同 的 
浏览 器 软件 。 现 在 比较 流行 的 浏览 器 有 IE 和 Firefox 等 。 

4. 统一 资源 定位 符 URL) 


URL (Uniform Resource Locator) ， 称 为 统一 资源 定位 符 ， 它 是 一 个 能 识别 Internet 地 址 
的 信息 资源 。 通 过 URL 可 以 到 达 任 何 网 络 地 址 寻找 所 需 的 资源 ， 例 如 文件 、 数 据 库 、 图 像 、 
新 闻 组 等 。http://www.sohu.com/index.html 就 是 一 个 常见 的 URL 资源 。 
3.3.4 网 页 设计 原则 

网 页 的 艺术 设计 ， 是 技术 与 艺术 的 结合 ， 内 容 与 形式 的 统一 。 它 要 求 设计 者 必须 掌握 以 下 
三 个 主要 原则 。 

1. 主题 鲜明 

网 页 需要 有 明确 的 主题 , 并 能 够 以 独特 的 样式 吸引 浏览 者 的 注意 。 要求 在 视觉 设计 上 有 目 
标 ， 有 明确 主题 ， 并 能 在 最 短 时 间 内 被 浏览 者 接受 。 视 觉 设 计 需 要 具备 目标 唯一 、 简 单 明 了 、 
精确 和 清晰 等 特点 ， 最 好 还 要 具备 一 定 的 视觉 冲击 效果 。 

网 站 主题 决定 了 网 页 设计 风格 , 只 有 主题 表达 清楚 ,才能 添加 艺术 信息 。 一 个 网 站 视觉 上 
再 美 ， 如 果 没 有 主题 信息 ， 也 不 会 有 浏览 者 访问 。 

例如 某 个 旅游 网 站 ， 所 展现 的 都 应 是 与 旅游 相关 的 信息 ， 如 图 3-12 所 示 。 
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图 3-12 主体 明确 
2. 形式 与 内 容 统一 


俗话 说 表里如一 , 用 在 网 页 设计 中 是 非常 恰当 的 。 任 何 一 个 网 站 都 存在 内 容 和 形式 ， 内容 
就 是 要 表达 的 对 象 ， 形式 就 是 内 容 的 表现 方式 , 例如 一 个 新 闻 ， 新闻 本 身 就 是 内 容 ， 具 有 极 高 
的 吸引 价值 ， 而 形式 就 是 新 闻 显 示 的 方式 和 样式 ， 如 文本 显示 ， 此 时 需要 布局 、 搭 配 颜色 。 

在 网 页 设计 中 ， 内容 可 以 说 是 主题 、 题 材 等 元 素 的 总 和 ， 形 式 就 是 它 的 结构 、 风 格 和 设计 
语言 等 。 内 容 主 宰 形 式 ， 形 式 影响 内 容 。 形 式 必须 符合 内 容 ， 二 者 才能 相得益彰 。 如 果 只 追求 
花哨 的 表现 形式 以 及 惊人 的 冲击 效果 , 或 者 只 是 追求 内 容 而 缺乏 任何 的 艺术 表现 , 网 页 设计 要 
么 会 变 得 空洞 无 力 ， 要 么 会 变 得 单一 乏味 。 还 需要 文字 和 图 形 都 表现 一 个 中 心 ， 如 图 3-13 所 
示 。 


图 3-13 内容 形式 统一 


3. 强调 整体 

网 页 整体 效果 ， 即 整体 风格 ， 是 网 页 设计 者 必须 要 追求 的 。 例 如 一 个 人 如 果 上 身 穿 西装 ， 
下 身 穿 裤头 , 脚 上 穿 雨 靳 ,就 没有 整体 形象 了 。 网 页 是 一 种 媒体 表现 形式 , 是 用 来 传播 信息 的 。 
它 所 承载 的 信息 , 必须 具备 一 定价 值 , 有 一 定 的 内 容 、 主 题 和 意念 , 这 样 才能 够 被 人 们 所 接受 ， 
从 而 满足 人 们 需求 。 

然而 , 过 分 追求 整体 效果 , 会 牺牲 页 面 个 体 的 灵活 性 。 所 以 , 在 强调 网 页 整体 设计 的 同时 ， 
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还 应 注意 网 页 个 体 的 灵活 性 ， 不 然 网 页 就 会 显得 呆板 、 沉 问 、 枯 燥 ， 进 而 影响 访问 者 的 情趣 或 
浏览 欲望 。 


3.3.5 ”网 页 设计 的 成 功 要 素 

网 站 设计 成 功 的 要 素 有 整体 布局 、 有 价值 的 信息 、 速 度 、 图 形 、 版 面 设计 、 文 字 可 读 性 、 
网 页 标题 可 读 性 、 网 站 导航 和 词语 准确 。 

1. 整体 布局 

网 页 是 访问 者 最 先 看 到 的 信息 , 应 该 做 到 能 够 在 第 一 时 间 吸 引 住 浏览 者 。 好 的 网 页 应 该 干 
净 整 洁 、 条 理 清 楚 、 引 人 入 胜 。 不 应 是 杂乱 无 章 的， 例如 有 过 多 的 闪烁 、 色 彩 、 下 拉 菜 单 框 、 
图 片 等 ， 这 样 就 会 分 散 浏览 者 的 注意 力 。 

2. 有 价值 的 信息 

无 论 何 种 类 型 的 网 站 , 其 目的 都 是 给 读者 一 定 的 价值 信息 ,这样 读 者 才 会 愿意 浏览 。 这 些 
有 价值 的 信息 ， 可 以 是 新 闻 、 娱 乐 等 。 如 果 是 企业 网 站 ， 需 要 提供 关于 产品 信息 和 服务 信息 ， 
这 些 信 息 必 须 容易 理解 和 查询 。 


3. 速度 


如 果 30 秒 内 还 打 不 开 网 页 ， 一 般 人 就 会 没有 耐心 。 因 此 ， 在 设计 网 页 的 过 程 中 ， 至 少 应 
该 确保 主页 速度 尽 可 能 快 ， 最 好 不 要 用 大 的 图 片 。 


4. 图 形 和 版 面 设计 


图 形 和 版 面 设计 关系 到 浏览 者 对 网 页 的 第 一 印象 ,图形 应 集中 反映 主页 所 期 望 传达 的 主要 
信息 ， 如 图 3-14 所 示 。 


arta aris essa 
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图 3-14 版 面 设计 


5. 文字 可 读 性 


在 设计 网 页 的 文字 信息 时 , 一 定 要 给 文字 周围 留 有 足够 的 空间 , 才能 使 浏览 者 感觉 不 到 压 
抑 ， 另 外 ， 文 字 的 颜色 最 好 不 要 使 用 紫色 、 柳 色 和 红色 ， 因 为 这 些 颜 色 会 让 人 了 眼花 练 乱 。 
男 一 种 能 够 提高 文字 可 读 性 的 因素 是 所 选 的 字体 , 通用 字体 最 易 阅 读 , 特殊 字体 用 于 标题 
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效果 较 好 ， 但 是 不 适合 正文 。 
6. 网 页 标题 可 读 性 


网 页 标题 必须 容易 阅读 , 需要 为 所 有 标题 和 副标题 设置 同一 字体 , 并 将 标题 字体 加 大 一 号 ， 
所 有 标题 和 副标题 都 采用 粗 体 ， 这样 便于 识别 标题 (字体 加 大 加 粗 ) 和 副标题 ( 粗 体 ,与 正文 
字体 大 小 相同 ) ， 使 浏览 者 一 眼 就 可 以 看 到 要 点 ， 以 便 找 出 并 继续 阅读 有 兴趣 的 内 容 。 


7. 网 站 导航 


由 于 人 们 习惯 于 从 左 到 右 、 从 上 到 下 阅读 ， 所 以 导航 条 通常 应 放置 在 页 面 左 边 , 对 于 较 长 
页 面 来 说 , 在 最 底部 设置 简单 导航 也 很 有 必要 。 确定 一 种 满意 模式 之 后 ,最 好 将 这 种 模式 应 上 
到 同一 网 站 的 每 个 页 面 ， 这 样 ， 浏 览 者 就 知道 如 何 寻 找 信息 。 


8. 词语 准确 

一 个 网 站 如 果 只 有 漂亮 的 外 观 但 是 却 词语 错误 连篇 、 语 法 混乱 ， 同 样 是 失败 的 ， 因 此， 应 
注意 词语 的 准确 无 误 。 
3.3.6 ”网 页 设计 风格 及 色彩 搭配 

网 站 设计 要 注意 的 两 个 要 点 : 整体 风格 和 色彩 搭配 。 

1. 确定 网 站 整体 风格 


同一 个 主题 ， 任 何 两 人 都 不 可 能 设计 出 完全 一 样 的 网 站 。 风 格 style》 是 抽象 的 ， 是 指 站 
点 的 整体 形象 给 浏览 者 的 综合 感受 。 这 些 都 是 网 站 给 人 们 留 下 的 不 同感 受 。 例 如 ， 图 3-15 所 
示 的 网 站 首页 ， 特 点 是 风格 简洁 、 大 方 ， 主 题 明确 。 
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图 3-15 整体 风格 
2. 网 页 色彩 搭配 
无 论 是 平面 设计 ， 还 是 网 页 设计 ， 色 彩 永远 是 最 重要 的 一 环 。 当 距离 显示 屏 较 远 的 时 候 ， 
看 到 的 不 是 优美 的 版 式 或 美丽 的 图 片 ， 而 是 网 页 的 色彩 。 例 如 图 3-16 所 示 的 首页 ， 其 颜色 以 
浅 色 作为 主 色调 ， 可 以 衬托 文字 和 图 片 效 果 。 
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图 3-16 色彩 搭配 
下 面 介绍 一 些 网 页 色彩 搭配 的 实战 经 验 。 


@ 和 白 纸 黑 字 是 永远 的 主题 。 
@ 网 页 最 常用 流行 色 : 
> 蓝 色 一 一 蓝天 白云 ， 沉静 整洁 的 颜色 。 
> 绿色 一 一 绿 白 相 间 ， 和 雅致 而 有 生气 。 
> 檬 色 一 一 活泼 热烈 ， 标 准 商业 色调 。 
> 有 瞳 红 一 一 宁 重 、 严 肃 、 高 贵 ， 需 要 配 黑 和 灰 来 压制 刺激 的 红色 。 
@ 颜色 忌讳 : 
> 辟 脏 背景 与 文字 内 容 对 比 不 强烈 ， 灰 瞳 的 背景 会 令 人 浊 丧 。 
> 忌 纯 一 一 艳丽 的 纯色 对 人 的 刺激 太 强 型， 缺乏 内 涵 。 
> 总 花 一 一 要 有 一 种 主 色 贯穿 其 中 ， 主 色 并 不 是 面积 最 大 的 颜色 ， 而 是 最 重要 ， 最 
能 揭示 和 反映 主题 的 颜色 。 
> 足 粉 一 一 闫 色 浅 固然 显 的 干净 ， 但 如 果 对 比 过 弱 ， 就 会 显得 苍白 无 力 。 
> 蓝 色 忌 纯 ， 绿 色 忌 黄 ， 红 色 忌 艳 。 
@ 几 种 固定 搭配 : 
蓝 白 橙 一 一 蓝 为 主 调 。 白 底 ， 蓝 标题 栏 ， 橙 色 按 钮 或 ICON 做 点 缓 。 
绿 白 兰 一 一 绿 为 主 调 。 白 底 ， 绿 标题 栏 ， 兰 色 或 橙色 按钮 或 用 ICON 做 点 级 。 
橙 白 红 一 一 橙 为 主 调 。 白 底 ， 橙 标题 栏 ， 暗 红 或 桔 红色 按钮 或 用 ICON 做 点 组 。 
上 暗 红 黑 暗 红 主 调 。 黑 或 灰 底 ， 暗 红 标 题 栏 ,文字 内 容 背景 为 浅 灰色 。 


3.4 网 页 设计 师 应 具备 的 素质 
当 打 开 网 站 时 ,首先 映 入 眼帘 的 是 该 网 页 的 界面 设计 , 如 内 容 介绍 、 按钮 摆 放 、 文字 组 合 、 


色彩 应 用 、 网 页 导航 等 ， 这 些 都 是 网 页 设计 师 的 工作 。 作 为 优秀 的 网 页 设计 师 ， 需 要 具备 艺术 
素质 、 技 能 素质 和 综合 素质 等 。 


Vvyvyv 
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3.4.1 艺术 素质 


美 是 包含 或 体现 社会 生活 的 本 质 、 规 律 ， 引 起 人 们 的 特定 情感 反映 的 具体 形象 (包括 社会 
形象 、 自 然 形象 和 艺术 形象 ) 。 审 美能 力 是 个 人 所 具有 的 审美 活动 相关 的 主观 条 件 和 心理 能 力 。 

作为 一 名 网 页 设计 师 , 要 使 自己 的 网 页 具有 美感 。 这 要 求 设计 师 平时 多 积累 , 在 仔细 观察 
的 基础 上 分 析 美 的 来 源 , 并 能 灵活 地 将 这 种 美 在 自己 的 作品 中 表现 出 来 。 只 有 这 样 才能 使 自己 
的 审美 能 力 达 到 一 定 的 高 度 。 

网 页 设计 中 所 区 含 的 美 ， 是 通过 视听 来 实现 的 。 网 页 设计 中 恰当 引导 访问 者 的 视 〈 文 字 、 
图 形 、 动 画 ) 、 听 (声音 ) 两 种 感官 ， 使 其 获得 “美感 ”， 是 设计 中 的 关键 。 例 如 ， 如 图 3-17 
所 示 的 网 页 首页 ， 通 过 色彩 、 图 片 和 创意 将 美发 挥 出 来 。 


Ke 


[二 


图 3-17 艺术 审美 

3.4.2 ”技能 素质 

技术 问题 是 网 页 设计 的 核心 。 网 页 设计 者 不 仅 要 考虑 设计 给 用 户 的 感觉 、 用 户 访问 站 点 的 
目的 ， 同 时 还 要 考虑 如 何 运 用 技术 把 自己 的 思想 表达 出 来 。 
3.4.3 ”综合 素质 

作为 合格 的 网 页 设计 师 , 必要 的 文化 素质 是 不 可 少 的 。 当 然 文化 素质 不 仅仅 包括 文学 修养 ， 
还 有 音乐 和 绘画 等 方面 的 修养 .只 有 有 具备 这 些 方面 的 修养 ,才能 够 使 自己 网 页 达到 一 定 的 水 准 ， 
才能 够 使 人 欣赏 到 好 的 网 页 制作 。 

网 页 设计 者 的 素质 不 是 在 短 时 间 内 就 能 提高 的 ， 要 靠 时 间 用 心 积 累 而 成 。 因 此 ， 要 想 成 为 

-名 真正 的 设计 高 手 , 网 页 设计 者 不 仅 要 有 一 颗 真 诚 为 浏览 者 服务 的 心 , 还 要 广泛 涉猎 各 个 领 

域 ， 特 别 是 要 提高 自己 的 艺术 修养 、 文 学 水 平 以 及 鉴赏 能 力 。 


3.5 ”网 站 制作 流程 


网 站 的 整体 规划 和 设计 的 好 坏 是 它 发 展 的 重要 之 处 , 也 是 它 吸 引 人 们 浏览 的 所 在 之 处 。 动 
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手 创建 网 站 ， 需 要 遵循 一 定 的 制作 流程 
3.5.1 前 期 策划 
在 做 网 站 之 前 ， 要 有 准确 的 定位 。 在 明确 建站 目的 和 网 站 定位 以 后 ， 就 要 开始 收集 相关 意 
见 。 
1， 网 站 定位 


如 果 是 公司 的 网 站 , 在 定位 时 ， 要 与 公司 决策 层 人 士 共 同 讨 论 ， 以 便于 让 上 层 领导 能 对 网 
站 发 展 方向 有 一 定 的 把 握 , 同时 最 好 调动 公司 其 他 部 门 一 起 参 于 讨论 , 能 够 及 时 从 公司 立场 提 
出 好 的 建议 ， 并 结合 到 策划 中 去 。 策 划 时 全 面 考虑 ， 是 前 期 策划 中 最 为 关键 的 一 步 。 

2. 收集 相关 信息 


网 站 如 果 是 为 公司 服务 的 , 就 要 收集 各 个 部 门 的 意见 和 想法 , 这 是 必要 的 , 需要 将 这 一 步 
整理 成 文档 ， 并 找 出 重点 。 再 根据 重点 以 及 公司 业务 侧重 点 ,结合 网 站 定位 来 确定 网 站 分 栏 有 
哪儿 项 。 


3.5.2 ”页 面 细 化 及 实施 


页 面 设计 人 员 是 根据 策划 书 来 设计 页 面 的 ,在 设计 之 前 应 该 让 栏目 负责 人 把 需要 特殊 处 理 
的 地 方 和 设计 人 员 讲 明 。 在 设计 页 面 时 , 设计 人 员 一 定 要 根据 策划 书 把 每 个 栏目 的 具体 位 置 和 
网 站 的 整体 风格 确定 下 来 ， 为 了 让 Ra 应 该 在 网 页 中 放置 一 些 贯穿 性 的 元 素 。 


实现 设计 时 ， 由 制作 人 员 和 负责 实现 网 页 ， 并 制作 成 模版 。 在 这 个 过 程 实现 的 同时 ， 栏 目 负 
eee ee ne 模版 制作 完成 后 , 由 栏目 负责 人 往 每 个 栏 
目 里 面 添加 具体 内 容 。 


在 上 述 过 程 进 行 的 同时 , 程序 员 应 该 正 处 于 开发 程序 的 阶段 , 要 注意 选择 好 的 网 站 开发 语 
言 和 适合 的 数据 库 。 
3.5.3 ”网 站 上 传 

将 网 站 上 传 到 网 络 服务 器 的 整个 流程 是 : 首先 要 在 网 络 服务 器 上 注册 域名 并 申请 网 络 空 
间 ， 然 后 配置 网 站 系统 ， 最 后 才能 上 传 网 站 。 

1. 申请 域名 

网 站 建 好 之 后 ， 就 要 给 网 站 注册 标识 ， 即 域名 。 

申请 域名 的 方法 很 多 , 用 户 可 以 登录 域名 服务 商 的 网 站 , 根据 提示 申请 域名 。 域 名 有 免费 
域名 和 收费 域名 两 种 ， 用 户 可 以 根据 实际 的 需要 进行 选择 。 

2. 申请 空间 

域名 注册 成 功 之 后 ， 就 需要 申请 网 站 空间 。 应 根据 不 同 的 网 站 类 型 选择 不 同 的 空间 。 

网 站 空间 有 免费 空间 和 收费 空间 两 种 ,对 于 个 人 网 站 的 用 户 来 说 ,可 以 申请 免费 空间 使 用 。 
免费 空间 只 需 向 空间 提供 服务 器 提出 的 申请 , 在 得 到 答复 后 , 按照 说 明 上 传 主页 即 可 ,主页 的 


HTML 5 _ 从 零 开始 学 视频 教学 版 ) 


域名 和 空间 都 不 用 操心 。 使 用 免费 空间 美中不足 的 是 : 网 站 的 空间 有 限 ， 提 供 的 服务 一 般 ， 空 
间 不 是 非常 稳定 ， 域 名 不 能 随心 所 欲 。 
对 于 商业 网 站 而 言 ， 用 户 需要 考虑 空间 和 安全 性 等 因素 ， 为 此 可 以 选择 收费 网 站 。 


3. 配置 网 站 系统 


对 于 企业 单位 来 说 ,如果 是 企业 自己 的 服务 器 , 那么 只 要 把 做 好 的 网 站 (包括 CGI、ASP、 
JSP 或 者 PHP 等 程序 ) 发 到 WWW 路 径 下 就 可 以 了 。 而 对 于 个 人 申请 的 免费 空间 网 页 ， 就 需 
要 将 本 地 计算 机 上 已 经 做 好 的 网 站 上 传 到 申请 好 的 网 站 服务 器 的 免费 空间 上 去 。 


3.5.4 ”后 期 维护 
网 站 制作 并 完成 上 传 后 ， 接 下 来 是 网 站 维护 ， 下 面 介绍 网 站 后 期 维护 的 主要 方法 。 
1 做 好 网 站 备份 
现在 互联 网 技术 普及 ， 普 通用 户 利用 黑客 软件 ， 就 能 攻击 安全 性 不 高 的 网 站 ， 从 而 造成 网 


站 服务 器 崩溃 、 数 据 丢失 等 后 果 ， 最 终 网 站 将 付 诸 东 流 。 因 此 ， 对 网 站 的 定期 备份 ， 不 仅 是 对 
自己 负责 ， 还 是 对 网 站 忠实 用 户 的 尊重 。 

2. 定期 查看 网 站 日 志 

网 站 管理 人 员 , 应 该 查看 网 站 日 志 。 通 过 网 站 日 志 , 可 以 了 解 到 搜索 引擎 何 时 访问 了 网 站 ， 
又 访问 了 哪些 页 面 ， 经 常 访 问 哪些 页 面 ， 这 些 信 息 对 进一步 优化 改善 网 站 非常 重要 。 

此 外 ,维护 人 员 还 可 以 了 解 网 站 是 否 出 现 了 故障 ,是 否 已 被 入 侵 。 最 重要 的 是 通过 网 站 日 
志 ， 可 以 检测 出 是 否 有 采集 软件 在 采集 网 站 数据 ， 网 站 是 否 被 盗 链 。 

3. 网 站 内 容 维护 

内 容 是 比较 重要 的 。 当 用 户 第 二 次 来 网 站 和 前 一 次 访问 看 到 的 内 容 一 样 时 或 许 还 回来 第 三 
次 ， 但 第 三 次 内 容 还 是 没有 更 新 ， 那 就 可 能 要 失去 这 个 忠实 用 户 了 。 

4. 网 站 外 链 维护 

外 链 是 网 站 维护 不 可 分 割 的 一 部 分 ， 在 互联 网 中 ， 没 有 了 外 链 ， 网 站 就 像 大 海中 的 孤岛 。 
外 链 不 仅仅 是 在 互联 网 这 个 地 图 上 标 出 了 位 置 , 更 是 为 搜索 引擎 建 起 了 桥梁 , 当 桥梁 足够 宽阔 
时 ， 搜 索引 擎 会 带 来 源源 不 断 的 客流 。 


3.6 ”综合 实例 一 一 搜集 网 页 素材 


目前 图 片 是 组 成 网 页 的 主要 元 素 之 一 , 在 浏览 网 页 时 ,如 果 遇 到 比较 漂亮 的 图 片 , 可 以 将 
其 下 载 并 保存 起 来 ， 以 便 日 后 欣赏 和 使 用 。 保 存 网 页 中 图 片 的 具体 操作 步骤 如 下 。 


和 打开 一 个 存在 图 片 的 网 页 ， 如 图 3-18 所 示 .。 
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图 3-18 美 图 网 页 


tQ3j 在 图 片 的 任意 位 置 单 击 和 鼠标 右 键 ， 从 弹出 的 快捷 菜单 中 选择 “图 片 另存 为 ”菜单 项 ， 
如 图 3-19 所 示 。 


图 3-19 “图 片 男 存 为 ”选项 
93j 打开 “保存 图 片 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 要 保存 图 片 的 名 称 ， 单 击 “ 保 
存 类 型 ” 右 侧 的 下 拉 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 JPEG (*jpg) 选项 ， 如 图 3-20 所 示 。 
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图 3-20 “保存 图 片 ”对 话 框 


罗 9 弛 单 击 “ 保 存 ” 按 钮 ， 即 可 开始 下 载 并 保存 图 片 。 打 开 图 片 存 放 的 目录 ， 即 可 在 该 文 
件 夹 下 看 到 下 载 的 图 片 缩 略图 ， 如 图 3-21 所 示 。 


图书 项 目 区 (6 
鱼 怒 和 区 (P) 


浪漫 卧室 jpg 深 扫 日 期: 指定 折 概 昌 其 


大 d 671 KB 
JPEG 图像 标 忆 : 滞 如 标记 


分 各 
RJ: 670 x 443 


画 55i 保存 的 图 片 
3.7 ”问题 解答 


1. 网 页 设计 中 ， 图 像 如 何 使 用 ? 

图 像 内 容 应 有 一 定 的 实际 作用 , 切忌 虚 饰 浮夸 。 图 像 可 以 弥补 文字 的 不 足 , 但 并 不 能 够 完 
全 取代 文字 。 很 多 用 户 把 浏览 软件 设 定 为 略 去 图 像 ， 以 求 节省 时 间 ， 因 此 ， 制 作 主页 时 ， 必 须 
注意 将 图 像 所 链接 的 重要 信息 或 链接 其 他 页 面 的 指示 用 文字 重复 表达 几 次 ,同时 要 注意 避免 使 


。72 。 
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用 过 大 的 图 像 ， 如 果 不 得 不 放置 大 的 图 像 在 网 站 上 , 应 该 把 图 像 的 缩小 版 本 的 预览 效果 显示 出 
来 ， 这 样 用 户 就 不 必 浪 费 金钱 和 时 间 去 下 载 他 们 根本 不 想 看 的 大 图 像 了 。 

2. 如 何 使 用 动画 ? 

大 家 都 喜欢 用 GIF 动画 来 装饰 网 页 ， 虽 然 GIF 动画 很 吸引 人 ， 但 在 选择 时 ， 要 判断 是 否 
必须 用 GIF 动画 ， 如 果 答 案 是 否定 的 ， 那 么 就 选择 静态 的 图 片 ， 因 为 它 的 容量 要 小 得 多 。 同 
样 尺寸 的 Logo，GIF 动画 的 容量 有 SKB， 而 静止 Logo 的 只 有 3KB 。 虽 然 只 有 2KB 之 差 , 但 
多 起 来 ， 就 会 影响 下 载 的 速度 ， 所 以 ， 如 果 有 些 不 是 必须 的 ， 就 选择 最 小 的 。 

3. 网 页 设计 对 HTML 代码 要 求 大 吗 ? 
为 了 成 功 地 设计 网 站 , 必须 理解 HTML 是 如 何 工作 的 。 建 议 新 手 应 从 本 书 中 去 寻找 答案 ， 
和 记事 本 制作 网 页 。 因 为 用 HTML 设计 网 站 ， 可 以 控制 设计 的 整个 过 程 。 
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第 4 章 HTML5 中 的 文档 结构 


文档 结构 主要 是 指 文章 的 内 部 结构 , 在 网 页 中 则 表现 为 整个 页 面 的 内 部 结构 。 在 HTML 5 
之 前 ， 并 没有 对 网 页 文档 的 结构 进行 明确 的 规范 , 因而 打开 网 页 源 代 码 时 ， 可 能 无 法 分 清 哪些 
是 头 部 、 哪 些 是 尾部 ， 而 在 HTML 5 中 则 对 此 做 了 明确 的 规范 。 


4.1 Web 标准 


在 学 习 HTML 5 网 页 文档 结构 之 前 ， 首 先 需 要 了 解 Web 的 标准 ， 该 标准 主要 是 为 了 解决 
各 种 浏览 器 与 网 页 的 兼容 性 问题 。 


4.1.1 ”Web 标准 概述 


无 规矩 不 成 方圆 ， 网 页 设计 也 是 如 此 。 为 了 Web 更 好 地 发 展 ， 对 于 开发 人 员 和 最 终 用 户 
而 言 , 非常 重要 的 事情 就 是 在 开发 新 的 应 用 程序 时 , 浏览 器 开发 商 和 站 点 开发 商 需 要 遵守 同一 
个 标准 ， 就 是 Web 标准 。 

为 了 缩短 开发 和 维护 时 间 ， 未 来 的 网 站 将 不 得 不 根据 标准 来 进行 编码 。 这样， 开发 人 员 就 
不 必 为 了 得 到 相同 的 结果 ， 而 挣扎 于 多 版 本 的 开发 困扰 中 。 一 旦 所 有 Web 开发 人 员 遵 守 了 
Web 标准 ， 那 么 开发 人 员 就 可 以 更 容易 地 理解 彼此 的 编码 了 ，Web 开发 团队 所 有 协作 也 将 会 
得 到 简化 。 

使 用 Web 标准 有 以 下 几 个 优点 。 

1. 对 于 访问 者 

文件 下 载 与 页 面 显示 速度 更 快 。 
内 容 能 被 更 多 的 用 户 所 访问 (包括 失明 、 视 弱 、 色 讶 等 残障 人 士 )。 
内 容 能 被 更 广泛 的 设备 所 访问 (包括 屏幕 阅读 机 、 手 持 设备 、 打 印 机 等 )。 
用 户 能 够 通过 样式 选择 定制 自己 的 表现 界面 。 
所 有 页 面 都 能 提供 适 于 打印 的 版 本 。 
.对 于 网 站 所 有 者 
更 少 的 代码 和 组 件 ， 容 易 维护 。 
带宽 要 求 降低 (代码 更 简洁 )， 成 本 降低 。 
更 容易 被 搜寻 引擎 搜索 到 。 
改版 方便 ， 不 需要 变动 页 面 内 容 。 


SeeenhNheee eg@ @ 
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@ 提供 打印 版 本 而 不 需要 复制 内 容 。 
@ 提高 网 站 易 用 性 。 在 美国 ， 有 严格 的 法 律 条 款 ( Section 508 ) 来 约束 政府 网 站 必须 达 
到 一 定 的 易 用 性 ， 其 他 国家 也 有 类 似 的 要 求 。 

4.1.2 ”Web 标准 规定 的 内 容 

Web 标准 不 是 某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 网 页 主要 由 三 部 分 组 成 ， 即 结构 
(Structure) 、 表 现 (Presentation) 和 行为 (Behavior) ， 那 么 ， 对 应 的 标准 也 分 三 方面 ， 分 
别 如 下 : 

@ 结构 化 标准 语言 主要 包括 XHTML 和 XML。 

@ 表现 标准 语言 主要 包括 CSS。 

@ 行为 标准 主要 包括 对 象 模型 ， 如 W3CDOM、ECMAScript 等 。 

这 些 标准 大 部 分 由 W3C 起 草 和 发 布 ， 也 有 一 些 是 其 他 标准 组 织 制订 的 标准 ， 比 如 ECMA 
(European Computer Manufacturers Association) 的 ECMAScript 标准 。 

1. 结构 标准 语言 

(1) XML 


XML 是 Extensible Markup Language( 可 扩展 标识 语言 ) 的 简写 。 目 前 推荐 遵循 的 是 W3C 
于 2000 年 10 月 6 日 发 布 的 XML1.0。 和 HTML 一 样 ，XML 同样 来 源 于 SGML， 但 XML 是 
-种 能 定义 其 他 语言 的 语言 。XML 最 初 设计 的 目的 是 弥补 HTML 的 不 足 ， 以 其 强大 的 扩展 性 
满足 网 络 信息 发 布 的 需要 ， 后 来 逐渐 用 于 网 络 数据 的 转换 和 描述 。 
(2 ) XHTML 


XHTML 是 Extensible HyperText Markup Language〈 可 扩展 超 文本 标识 语言 ) 的 缩写 。 目 
前 推荐 遵循 的 是 W3C 于 2000 年 1 月 26 日 发 布 的 XML1.0。XML 虽然 数据 转换 能 力 强大 ， 完 
全 可 以 替代 HTML, 但 面 对 成 千 上 万 已 有 的 站 点 , 直接 采用 XML 还 为 时 过 早 。 因此 , 在 HTML 
4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 扩展 ， 得 到 了 XHTML 。 简 单 来 说 ， 建 立 XHTML 的 
目的 就 是 实现 HTML 向 XML 的 过 渡 。 


2. 表现 标准 语言 


CSS 是 Cascading Style Sheets〈 层 登 样 式 表 ) 的 缩写 。 目 前 推荐 遵循 的 是 W3C 于 1998 年 
5 月 12 日 发 布 的 CSS2。W3C 创建 CSS 标准 的 目的 是 以 CSS 取代 HTML 表格 式 布 局 、 帧 和 
其 他 表现 的 语言 。 纯 CSS 布局 与 结构 式 XHTML 相 结合 能 帮助 设计 师 分 离 外 观 与 结构 ， 使 站 
点 的 访问 及 维护 更 加 容易 。 

3. 行为 标准 

(1) DOM 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 缩写 。 根 据 W3C DOM 规范 ，DOM 


。75。 
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是 一 种 与 浏览 器 平台 语言 的 接口 ， 它 可 以 访问 页 面 其 他 的 标准 组 件 。 简 单 来 说 ，DOM 解决 了 
Netscaped 的 JavaScript 和 Microsoft 的 JScript 之 间 的 冲突 ， 给 Web 设计 师 和 开发 者 提供 标准 
的 方法 ， 让 他 们 可 以 访问 自己 站 点 中 的 数据 、 脚 本 和 表现 层 对 象 。 

( 2 ) ECMAScript 


ECMAScript 是 ECMA (European Computer Manufacturers Association ) 制定 的 标准 脚本 语 
言 (JavaScript) 。 目 前 推荐 遵循 的 是 ECMAScript 262 。 


4.2 HTML 5 文档 的 基本 结构 


HTML 5 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、 开 始 标记 、 元 信息 、 主 体 标记 和 页 面 
4.2.1 HTML 5 结构 


在 一 个 HTML 文档 中 ,必须 包含 <HTML></HMTL> 标 记 , 并 且 放 在 HTML 文档 中 开始 和 
结束 位 置 ， 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。 


<head> 标 记 包 含 HTML 头 部 信息 ， 例 如 文档 标题 、 样 式 定义 等 。<body> 包 含 文档 主体 部 分 ， 
即 网 页 内 容 。 需 要 注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 

为 了 便于 读者 从 整体 把 握 HTML 文档 结构 ,通过 一 个 HTML 页 面 来 介绍 HTML 页 面 的 整 
体 结构 ， 示 例 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 网 页 标题 </title> 

</head> 

<body> 
网 页 内 容 

</body> 

</html> 


从 上 面 代码 可 以 看 出 ， 一 个 基本 的 HTML 页 由 以 下 几 部 分 构成 。 


@ <IDOCTYPE>: 声明 必须 位 于 HTML 5 文档 中 的 第 一 行 , 也 就 是 位 于 <html> 标 记 之 前 。 
该 标记 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!IDOCTYPE> 声 明 不 属于 HTML 标记 ; 
它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 标记 的 版 本 。 由 于 HTML 5 版 本 还 没有 得 到 
浏览 器 的 完全 认可 ， 后 面 介 绍 时 还 采用 以 前 通用 的 标准 。 

@ <html></html>: 说 明 本 页 面 使 用 HTML 语言 编写 ， 使 浏览 器 软件 能 够 准确 无 误 地 解 
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@ ”<head></head>: HTML 的 头 部 标记 ， 头 部 信息 不 显示 在 网 页 中 ， 此 标记 可 以 保护 其 他 
标记 。 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 。 可 以 通过 <style> 标 记 定义 CSS 
样式 表 ， 通 过 <scripf> 标 记 定 义 JavaScript 脚本 文件 。 

@ <title></title>: head 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 浏览 器 的 窗口 标题 栏 中 。 
如 果 没 有 title， 浏 览 器 标题 栏 显示 本 页 的 文件 名 。 

@ <body></body>: 包含 HTML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 客户 区 中 。 例 如 
页 面 中 文字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 的 内 容 都 是 在 body 标记 里 定 


4.2.2 文档 类 型 说 明 


Web 页 面 的 文档 类 型 说 明 (DOCTYPE) 被 极 大 地 简化 了 。 细 心 的 读者 会 发 现 ， 在 第 1 章 
中 使 用 Dreamweaver CS5.5 创建 HTML 文档 时 ， 文 档 头 部 的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/ 
DTD/xhtmll-transitional.dtd"> 


上 面 为 XHTML 文档 类 型 说 明 , 读者 可 以 看 到 这 段 代码 既 麻烦 又 难 记 , HTML 5 对 文档 类 
型 进行 了 简化 ， 简 单 到 使 用 15 个 字符 就 可 以 了 ， 代 码 如 下 : 


<!DOCTYPE html> 


【分 文档 类 型 的 说 明 需 要 出 现在 HTML 5 文件 的 第 一 行 。 
注 意 


4.2.3 HTML 5 标记 


HTML 5 标记 代表 文档 的 开始 ， 由 于 HTML 5 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 
是 为 了 使 之 符合 Web 标准 和 文档 的 完整 性 ， 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 

HTML 5 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书写 在 开头 和 结尾 的 中 间 
部 分 。 语 法 格式 如 下 : 


<html> 


es 
4.2.4” 尖 标记 


头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包 括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 
脚本 代码 等 。HTML 的 头 部 信息 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 


<head> 
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</head> 


<head> 元 素 的 作用 范围 是 整 篇 文档 ， 定 义 在 HTML 语言 头 部 的 内 容 往往 不 会 在 网 页 上 直 

1. 标题 标记 

HTML 页 面 的 标题 一 般 用 来 说 明 页 面 的 用 途 ， 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 文 
档 中 ,标题 信息 设置 在 <head> 与 </head> 之 间 。 标题 标记 以 <title> 开 始 ， 以 <htitle> 结 束 ,语法 格 
式 如 下 : 


<title> 
</title> 


在 标记 中 间 的 “... ”就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 预 览 网 页 时 ， 
设置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 ， 此 外 ， 在 Windows 任务 栏 中 显示 的 也 是 这 个 标 
题 ， 如 图 4-1 所 示 。 


Ne pv netaobe. pS ox | 
文件 (月 ”六 名 ( 引 ) 音 夏 Vi 站 莹 实 (A) 工具 TT。 项 内 (H) 
手机 版 亲 , 欢迎 来 说 宣 ! 请 登录 免责 主 朋 我 要 天 ~ 


淘 合 网 二 天 痪 0 主 商 城 ) 店 清 


Taobao.com 打 局 袍 单 回 大 区 达 人 锦 邯 胡琴 风 不 


天 葡 。 聚 叫 草 ”电器 城 


wm "|\@ hs 


拍 和 会 跳 千 沽 而 二 “gg 

斌 月 中 心 电子 书 全 球 购 rs 

及 生 天 寿 

和 本 电 8 条 fi 站 

二 焊 硬 时 医 贡 壕 

启动 天 活 TnAttcon 畏 和 和 特 妇 -人 k 虽 装 全 雪 包 
本 街 放 各 潭 k 妇 上 站 HE 


沽 公仔 乐理 ， 这 宝 天 下 散 


局 是 富 亡 关公 本 时 


图 4-1 标题 栏 在 浏览 器 中 的 显示 效果 


(7 页 面 的 标题 只 有 一 个 ， 在 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 。 
注 蕊 

2. 元 信息 标记 

<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information ) ， 比 如 针对 搜索 引擎 和 更 新 频 
度 的 描述 和 关键 词 。 

<meta> 标 签 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 的 属性 定义 了 与 文档 相关 联 
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的 名 称 / 值 对 ，<meta> 标 签 提供 的 属性 及 取 值 ， 如 表 4-1 所 示 。 


表 4-1 meta 标签 的 属性 和 值 


属性 值 描述 


charset character encoding 定义 文档 的 字符 编码 


content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 
expires 
refresh 
set-cookie 


http-equiv 把 content 属性 关联 到 HTTP 头 部 


author 
description 
keywords 
generator 
revised 
others 


name 


把 content 属性 关联 到 一 个 名 称 


( 1) 字符 集 charset 属性 


在 HTML 5 中 ， 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 
告诉 浏览 器 ， 网 页 使 用 ISO-8859-1 字符 集 显 示 ， 代 码 如 下 : 


<meta charset="ISO-8859-1"> 


(2) 搜索 引擎 的 关键 字 


在 早期 ,Meta Keywords 关键 字 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 字 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 : 
<meta name="keywords" content=" 关 键 字 ,keywords" 亡 
说 明 : 
@ 不 同 的 关键 词 之 间 应 用 半角 过 号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 “空格 ”或 “|” 
间隔 ; 


@ 其 中 ， 关 键 字 是 keywords， 不 是 keyword; 

@ 关键 字 标 签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 
例如 ， 定 义 针 对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


关键 字 标签 keywords 曾经 是 搜索 引擎 排名 中 很 重要 的 因素 , 但 现在 已 经 被 很 多 搜索 引 
擎 完全 忽略 。 如 果 加 上 这 个 标签 ， 对 网 页 的 综合 表现 没有 坏处 ， 不 过 ， 如 果 使 用 不 恰当 的 
话 ， 对 网 页 非但 没有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 字 标签 keywords 时 ， 要 注意 以 下 
几 点 : 
@ 关键 字 标 签 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 确 信使 用 的 关键 字 出 现在 网 页 文本 中 。 
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@ 使 用 用 户 易 于 通过 搜索 引擎 检索 的 关键 字 , 过 于 生僻 的 词汇 不 太 适 合 做 meta 标签 中 的 
关键 词 。 

@ 不 要 重复 使 用 关键 词 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 

@ 一 个 网 页 的 关键 词 标签 里 最 多 包含 3~5 个 最 重要 的 关键 词 ， 不 要 超过 5 个 。 

@ 每 个 网 页 的 关键 词 应 该 不 一 样 。 


C7 由 于 设计 者 或 SEO 优化 者 以 前 对 meta keywords 关键 字 的 混用， 导致 目前 它 在 搜 
索引 党 排名 中 的 作用 很 小 。 
注意 

(3 ) 页 面 描述 


meta description 即 元 标签 〈 描 述 元 标签 )， 是 一 种 HTML 元 标签 ， 用 来 简略 描述 网 页 的 
主要 内 容 , 通常 是 被 搜索 引擎 用 在 搜索 结果 页 上 给 最 终 用 户 看 的 一 段 文字 片段 。 页 面 描述 在 网 
页 中 是 不 显示 出 来 的 ， 页 面 描述 的 使 用 格式 如 下 : 


<meta name="description" content=" 网 页 的 介绍 " 亡 

例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 

<meta name="description" content=" 免 费 的 web 技术 教程 。" /> 
(4) 页面 定时 跳 转 


使 用 <meta> 标 记 可 以 使 网 页 经 过 一 定时 间 后 自动 刷新 , 这 可 通过 将 http-equiv 属性 值 设置 
为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 , 在 经 过 一 段 时 间 后 , 这 些 页 面 会 自动 转 到 
其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 : 


<meta http-equiv="refresh" content=" 秒 ;[url= 网 址 ]" /> 


说 明 : 上 面 的 [url= 网 址 ] 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 页 面 定时 刷新 并 跳 转 ， 如 果 省 略 
该 部 分 ， 页 面 只 定时 刷新 ， 不 进行 跳 转 。 
例如 ， 实 现 每 5 秒 刷新 一 次 页 面 ， 将 下 述 代 码 放 入 head 标记 部 分 即 可 : 


<meta http-equiv="refresh" content="5" /> 
4.2.5 网 页 的 主体 标记 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HTML 文件 的 重点 所 在 。 主 体 标记 
以 <body> 开 始 ， 以 </body> 标 记 结 束 ， 语 法 格式 如 下 : 


<body> 


</body> 
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注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 和 否则 会 造成 错误 。 
例如 ， 在 下 列 代 码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 : 


<html> 

<head> 

<title> 标 记 测 试 </title> 
<body> 

</head> 

</body> 

</html> 


代码 中 第 4 行 的 <body> 开 始 标记 和 第 5 行 的 <head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。 
HTML 中 所 有 代码 都 不 允许 交错 出 现 。 


4.2.6 ”页面 注释 标记 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 

在 HTML 源 代码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修 
改 和 维护 工作 很 有 好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 撰写 
的 内 容 。 

其 语法 如 下 : 

<!-- 注 释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 半 部 分 组 成 , 前 半 部 分 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 个 连 字 
符 头 ， 后 半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 


<html> 

<head> 

<title> 标 记 测试 <title> 

</head> 

<body> 

<!-- 这 里 是 标题 --> 

<hl>HTML 5 从 入 门 到 精通 </h1> 
</body> 

</html> 


页 面 注 释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 , 而 且 可 能 注释 掉 这 些 代码 。 
如 果 和 希望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 “<! 一 ”和 “-->” 之 间 ， 
例如 ， 修 改 上 述 代 码 ， 如 下 所 示 : 

<html> 

<head> 
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<title> 标 记 测 试 <title> 

</head> 

<body> 

= 

<hl>HTML 5 从 入 门 到 精通 </h1> 


-> 


修改 后 的 代码 将 <h1> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 
4.3 综合 实例 一 一 符合 W3C 标准 的 HTML 5 网 页 


下 面 制作 一 个 简单 的 符合 W3C 标准 的 HTML 5 网 页 ， 以 巩固 前 面 所 学 知识 。 
具体 操作 步骤 如 下 。 


td 启动 Dreamweaver CS5.5， 新 建 HTML 文档 ， 并 单 击 文档 工具 栏 中 的 “代码 ”视图 
按钮 ， 切 换 至 代码 状态 ， 如 图 4-2 所 示 。 


| [RK 页 ] 白 细 设计 实时 代码 | b% 三 革 。 实 时 视图 术 查 名 。 .多 屏 十 Jw“ 、 人。 标题 无 标 本 文档 | 
| 局 命 地 址 ; 国 
DOCTYPE htal PUBLIC /ACE /DTD Em .0 Tronsitional/ /EN “http://wee. .oro/TR/xhtall /DTD /henll-transitional, dy 
GE he calnse"herp: //ww.w3.org/1999/xhral"> 
3 chead 
cneta http-equive"Content-Type” content-"text/htal; charsereutt-8v /> 
各 5 <title> 无 标题 文档 c/title> 
日 cheat 
7 
革 bap 
9 </body 
wo </hcl> 
垢 出 


图 4-2 使 用 Dreamweaver CS5.5 新 建 HTML 文档 


io3 图 4-2 中 的 代码 是 XHTML 1.0 格式 , 尽管 与 HTML 5 完全 兼容 , 但 是 为 了 简化 代码 ， 
现在 将 其 修改 成 HTML 5 规范 。 修 改 文档 说 明 部 分 、<html> 标 记 部 分 和 <meta> 元 信息 部 分 ， 
修改 后 ，HTML 5 基本 结构 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title>HTML 5 网 页 设计 </title> 
</head> 
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t@3j 在 网 页 主体 中 添加 内 容 ， 在 body 部 分 增加 如 下 代码 : 
<!-- 白 居 易 诗 --> 

<hl> 续 座右铭 <hl> 

<P> 

千里 始 足下 ,<br> 

高 山 起 微 侍 。<br> 

在 道 亦 如 此 ,<br> 

行 之 贵 日 新 。<br> 
</P> 


四 多 保存 网 页 ， 在 IE 9.0 中 的 预览 效果 如 图 4-3 所 示 。 


[scone 
万 ] rML5 规 范 网 页 htm| P - CX | € 
文件 (月 ”编辑 (E) 


查看 (V) 收藏 夫 (A) 工具 Mm 下 ” 


行 之 贵 日 新 。 


图 4-3 网 页 预览 效果 


4.4 问题 解答 
1， 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 


在 HTML 5 网 页 中 ，<meta> 标 记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字符 集 
的 类 型 ， 中 国 常 用 的 是 GB 码 ， 因 为 在 中 国 要 经 常 显示 汉字 ,通常 设置 为 GB2312 (简体 中 文 ) 
和 UTF-8 两 种 。 英 文 是 ISO-8859-1 字符 集 ， 此 外 还 有 其 他 的 字符 集 ， 这 里 不 再 介绍 。 

2. 在 网 页 中 基本 标签 是 否 必须 成 对 出 现 ? 


在 HTML 5 网 页 中 ， 大 部 分 标签 都 成 对 出 现 ， 不 过 也 有 部 分 标签 可 以 单独 出 现 ， 例 如 换 
行 标签 <p/>、<br/>、<img/> 和 <hr/> 等 。 
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文字 和 图 像 是 网 页 中 最 主要 也 是 最 常用 的 元 素 , 这 一 章 将 讲解 如 何在 网 页 中 使 用 文字 、 文 
字 结 构 标 记 以 及 图 像 。 


5.1 添加 文本 


网 页 中 的 文本 可 以 分 为 两 大 类 : 一 类 是 普通 文本 ， 另 外 一 类 是 特殊 字符 文本 。 
5.1.1 普通 文本 


所 谓 普通 文本 是 指 汉字 或 者 在 键盘 上 可 以 输出 的 字符 。 读者 可 以 在 Dreamweaver CS5.5 代 
码 视图 的 body 标签 部 分 直接 输入 ; 或 者 在 设计 视图 下 直接 输入 。 

如 果 有 现成 的 文本 ， 可 以 使 用 复制 、 粘 贴 的 方法 把 其 他 窗口 中 需要 的 文本 复制 过 来 。 在 粘 
贴 文本 的 时 候 ， 如 果 只 希望 把 文字 粘贴 过 来 ， 而 不 需要 粘贴 其 他 文档 中 的 格式 ， 可 以 使 用 
Dreamweaver CS5.5 的 “选择 性 粘贴 ”功能 。 

“选择 性 粘贴 ”功能 只 在 Dreamweaver CS5.5 的 设计 视图 中 起 作用 ， 因 为 在 代码 视图 中 ， 
粘贴 的 是 “ 仅 文 本 ”， 不 会 有 格式 。 例 如 ， 将 Word 文档 表格 中 的 文字 复制 到 网 页 中 ， 而 不 需 
要 表格 结构 。 操 作 方法 : 选择 “编辑 ”一 “选择 性 粘贴 ……” 或 按 下 Ctrl+Shift+V 快捷 键 ， 弹 出 
“选择 性 粘贴 ”对 话 框 ， 在 对 话 框 中 选择 “ 仅 文 本 ”选项 ， 如 图 5-1 所 示 。 


粘贴 为 : ET 
回 仅 文本 
加 带 结 构 的 文本 段落 、 列 表 、 表 格 等 ) G) 取消 CC) 


侣 带 结构 的 文本 以 及 基本 格式 〈 粗 体 、 笠 体 ) @) 
加 带 结构 的 文本 以 及 全 部 格式 〈 粗 体 、 斜 体 、 样 式 ) G) 


保留 换行 符 ER) 
清理 Yord 段落 间距 0 


粘贴 首选 参数 中) 


图 5-1 “选择 性 粘贴 ”对 话 框 


5.1.2 ”特殊 字符 文本 


目前 ,很 多 行业 信息 都 出 现在 网 络 上 ,每 个 行业 都 有 自己 的 行业 特性 ， 如 数学 、 物 理 和 化 
学 都 有 特殊 的 符号 。 如 何在 网 页 上 显示 这 些 特 殊 符号 是 下 面 要 讲述 的 内 容 。 
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在 HTML 中 ， 特 殊 符 号 以 “& ”符号 开头 ， 后 面 跟 相关 字符 。 例 如 ， 大 括号 和 小 括号 被 
于 声明 标记 ， 因 此 如 果 在 HTML 代码 中 出 现 “<” 和 “>” 字 符 ， 就 不 能 直接 输入 了 ， 需 要 
作 特 殊 字 符 处 理 。HTML 中 ， 用 “&lt” 代 表 符号 “<”， 用 “&gt” 代 表 符 号 “>”。 如 ， 
输入 公式 a>b， 在 HTML 中 需要 这 样 表 示 : a&gt:b。 

HTML 中 还 有 大 量 这 样 的 字符 ， 例 如 ， 空 格 、 版 权 等 ， 常 用 特殊 字符 ， 如 表 5-1 所 示 。 


I 


表 5-1 常用 特殊 字符 


EE 

于 有 大 的 

全 和 大 

不 断 行 的 空白 格 
< 和 
> | 
& 
1 
© 
= 商标 (车 
am 


在 编辑 化 学 公式 或 物理 公式 时 , 使 用 特殊 字符 的 频率 非常 高 。 如 果 每 次 输入 时 都 去 查询 或 
者 要 记忆 这 些 特 殊 符 号 的 编码 ， 工 作 量 是 相当 大 的 。 在 此 作者 为 读者 提供 一 些 技巧 。 

(1) 在 Dreamweaver CS5.5 的 设计 视图 下 输入 字符 ， 如 输入 a>b 这 样 的 表达 式 ， 可 以 直 
接 输入 。 对 于 部 分 键盘 上 没有 的 字符 可 以 借助 “中 文 输入 法 ”的 软 键盘 。 在 中 文 输入 法 的 软 键 
盘 上 单 击 鼠标 右键 ， 弹 出 特殊 类 别 项 ， 如 图 5-2 所 示 。 选 择 所 需 类 型 ， 如 选择 “数学 符号 ”， 
弹出 数学 相关 符号 ， 如 图 5-3 所 示 。 单 击 “ 二 ”号 ， 即 可 输入 。 


PC 键盘 标点 符号 

希腊 字母 数字 序号 

俄 文 宇 母 数学 符号 

注音 符号 单位 符号 

拼 音 制 表 符 

日 文平 假名 特殊 符号 vil le | 
日 文 片 假名 国光 贱 轿 交加 辣 国 | 


叫 极 号 五 笔 |3|-:E)》 
图 5-2 特殊 符号 分 类 图 5-3 数学 符号 
(2) 文字 与 文字 之 间 的 空格 ， 如 果 超 过 一 个 ， 那 么 从 第 2 个 空格 开始 ， 都 会 被 忽略 掉 。 
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快捷 的 输入 空格 的 方法 如 下 : 将 输入 法 切换 成 “中 文 输入 法 ”， 并 置 于 “全 角 ” (Shift+ 空 格 ) 
状态 ， 直 接 单 击 键盘 上 的 空格 键 即 可 。 

(3) 对 于 上 述 两 种 方法 都 无 法 实现 的 字符 ， 可 以 使 用 Dreamweaver CS5.5 的 “插入 ” 菜 
单 实现 。 选 择 “ 插 入 ”一 “HTML” 一 “特殊 字符 ”菜单 命令 ， 在 所 需要 的 字符 中 选择 ， 如 果 
没有 ， 选 择 “ 其 他 字符 .….” 选 项 。 


0 尽量 不 要 使 用 多 个 &nbsp 来 表示 多 个 空格 ， 因 为 多 数 浏览 器 对 空格 的 距离 的 实现 
是 不 一 样 的 。 
注 意 
5.1.3 文本 特殊 样式 
在 文档 中 经 常会 出 现 重要 文本 〈 加 粗 显 示 ) 、 和 斜体 文本 、 上 标 和 下 标 文 本 等 。 
1. 重要 文本 


重要 文本 通常 以 粗 体 显示 、 强 调 方式 显示 或 加 强调 方式 显示 。HTML 中 的 <b> 标 记 、<em> 
标记 和 <strong> 标 记分 别 实现 了 这 三 种 显示 方式 。 
【 例 5.1】〔 实 例文 件 ，ch05\5.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 
<p><b> 我 是 粗 体 文字 </b></p> 
<p><em> 我 是 强调 文字 <lem></p> 
<p><strong> 我 是 加 强调 文字 </strong></p> 
</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-4 所 示 ， 实 现 了 文本 的 三 种 显示 方式 。 


| 


索 导 要 池上 衬 
我 是 加 强调 文字 


图 5-4 重要 文本 预览 效果 


HTML 5 中 的 文本 和 图 像 ”第 5 党 


2. 和 斜体 文本 
HTML 中 的 <i> 标 记 实现 了 文本 的 斜体 显示 ， 放 在 “<i>”、“</i>” 之 间 的 文本 将 以 斜体 


显示 。 
【 例 5.2】“〔 实 例文 件 : ch05\5.2.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

<i> 我 将 会 以 斜体 字 显示 </i> 
</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-5 所 示 ， 其 中 文字 以 斜体 显示 。 


Re Ee 
| mchoss2hml p - ¢ x |B 
“文件 月。 汕 颖 (E) 理 秋 (V)】 效 关 (A) 工具 冲动 (H) 


瑰 焰 会 以 立 厅 字 昌 示 


图 5-5 斜体 文本 预览 效果 


HTML 中 的 “重要 文本 ”和 和 斜体 文本 标记 已 经 过 时 ， 可 使 用 CSS 样式 来 实现 ,而 
不 是 使 用 HTML 来 实现 。 随 着 后 面 的 学 习 ， 读 者 会 发 现 ， 即 使 HTML 和 CSS 实 
注意 。 现 相同 的 效果 ， CSS 所 能 实现 的 控制 也 远 比 HTML 要 细致 、 精 确 很 多 。 


3. 上 标 和 下 标 文本 


在 HTML 中 用 <sup> 标 记 实现 上 标 文字 ， 用 <sub> 标 记 实 现下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 
【 例 5.3】 《实例 文件 : ch05\5.3.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

<!- 上 标 显示 --> 
<p>c=a<sup>2</sup>+b<sup>2</sup></p> 
<!- 下 标 显示 --> 
<p>H<sub>2</sub>+O 一 H<sub>2</sub>O</p> 
</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-6 所 示 ， 分 别 实现 了 上 标 和 下 标 文本 显示 。 


Ca e| 代码 \ch05\5.3.html DP- OX 
文件 (站 痪 误 6 各 看 MI。 收 苹 闪 (A)。 工具 TT) 帮 动 (H) 


c=a2Hb2 


HHtO->Ho0 


图 5-6 上 标 和 下 标 预览 效果 


5.2 ”排版 文本 


在 网 页 中 如 果 要 把 文字 合理 地 显示 出 来 , 离 不 开 段 落 标记 的 使 用 。 对 网 页 中 的 文字 段落 进 
行 排版 ， 并 不 像 文 本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 要 让 
某 一 段 文字 放 在 特定 的 地 方 是 通过 HTML 标记 来 完成 的 。 
5.2.1 段落 标记 与 换行 标记 

浏览 器 在 显示 网 页 时 , 完全 按照 HTML 标记 来 解释 HTML 代码 , 忽略 多 余 的 空格 和 换行 。 
在 HTML 文件 里 ， 不 管 输入 多 少 空格 〈 按 空格 键 ) 都 将 被 视 为 一 个 空格 ; 换行 〈 按 Enter 键 ) 
也 是 无 效 的。 在 HTML 中 ， 换 行使 用 <br> 标 记 ， 段 落 使 用 <p> 标 记 。 

1. 换行 标记 <br> 

换行 标记 <br> 是 一 个 单 标记 , 它 没有 结束 标记 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 在 
一 个 段 内 强制 换行 。 一 个 <be> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 使 用 换 
行 标记 时 ， 在 需要 换行 的 位 置 添 加 <br> 标 记 即 可 。 例 如 ， 下 面 的 代码 实现 了 对 文本 的 强制 换行 。 
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【 例 5.4】“《 实 例文 件 : ch05\5.4.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 段 换行 </title> 

</head> 

<body> 

本 节目 标 <br/> 

网 页 中 的 文字 是 如 何 设置 的 <br/> 

如 何在 Dreamweaver 中 处 理 文字 <br/> 
如 何 对 文本 进行 格式 化 《CSS) <br/> 
熟悉 使 用 Dreamweaver 进行 样式 表 的 创建 与 应 用 
</body> 

</html> 


虽然 在 HTML 源 代码 中 ， 主 体 部 分 的 内 容 在 排版 上 没有 换行 ， 但 是 增加 <br> 标 记 后 ， 在 
IE 9.0 中 的 预览 效果 如 图 5-7 所 示 ， 实 现 了 换行 效果 。 
pr ele 
( ND 异 ] 代 王 kho5\5.4.html -0 X ‖ 铭文 二 段 护 行 
文件 (月 ” 编 强 (E) 。 豆 看 (V) ”收藏 突 (A) 工具 (T) 帮助 (H) 
本 节目 村 
页 中 的 文字 是 如 何 设置 的 
PR 外 攻克 


如 何 对 文本 进行 格式 化 (CSS) 
熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 


图 5-7 换行 标记 的 效果 
2. 段落 标记 <p> 


段落 标记 是 双 标记 ， 即 <p></p>， 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形成 一 个 段 
落 。 如 果 省 略 结束 标记 ， 那 么 从 <p> 标 记 开始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 
个 段落 内 。 段 落 标记 中 的 p 是 英文 单词 paragraph 即 “段落 ”的 首 字 母 ， 用 来 定义 网 页 中 的 一 
段 文本 ， 文 本 在 一 个 段落 中 会 自动 换行 。 

【 例 5.5】 《实例 文件 :ch05\5.5.html) 


<!DOCTYPE html> 
<html> 
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<head> 

<title> 段 落 标记 的 使 用 </title> 

</head> 

<body> 

<p>HTML 5、CSS3 应 用 教程 之 跟 DIV 说 Bey!Bey!</p> 

<p>Web 设计 师 可 以 使 用 HTML4 和 CSS2.1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 table 
布局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰富 的 网 站 。 我 们 可 以 在 不 使 用 内 联 <font> 和 <br> 标 签 的 基础 上 对 
网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 力 已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 
代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 

<p> 


<p> 

虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 CSS2.1, 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代码 的 
结构 并 能 让 我 们 的 页 面 代 码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 让 他 们 有 更 高 
的 可 扩展 性 。 现 在 ，HTML 5 和 CSS3 正 跃跃欲试 的 等 待 大 家 ， 下 面 让 我 们 来 看 看 他 们 是 否 真 的 能 让 我 们 的 设 
计 提 升 到 下 一 个 高 度 吧 … 

</p> 

<p> 

曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 感谢 像 Jeffrey 
Zeldman 和 Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 的 接受 了 相对 更 语义 化 的 <div> 布 局 替代 了 
table 布局 ， 并 且 开 始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需要 大 量 不 同 的 标签 结构 代码 ， 我 们 把 
它 叫 做 “<div>-soup” 综合 症 。 


</p> 

</body> 

</html> 

在 IE 9.0 中 的 预览 效果 如 图 5-8 所 示 ，<p> 标 记 将 文本 分 成 4 个 段落 。 
| 
t 人 Vch05\5.5html ”0 X 上 大 卫 棕 标的 使 用 “a 


HE) 重要 V】 。 收 亩 空 W)。 工 县 [帮助 (H) 


HTIL5、CSS3 应 用 教程 之 跟 DTV 说 Bey!Bey! 


Web 设 计 师 可 以 使 用 HDL4 和 CSS2. 1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈 
旧 的 基于 table 布 局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰富 的 网 站 。 我 们 
可 以 在 不 使 用 内 联 和 

标签 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 
力 已 经 让 我 们 远离 了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 办 动 、 
滚动 和 闪 糙 的 丑 古 网 页 。 


和 次 丽 和 和 汪 才 信 个 才 二 下 各 和 和 呈 但 是 我 们 还 可 以 做 得 更 好 ! 我 ”| 引 
人 生生 全 位 基 管 二 大 人 的 面 代 三 人 我 们 可 
样式 代码 | 并 有 更 高 的 可 扩展 性 ， 现 
Hm hoes ER 等 竺 大 家 ,下面 让 区 们 来 着 乔 他 们 是 直人 能 让 我 
们 的 设计 提升 到 下 一 个 高 度 吧 … 


曾经 ， 设 计 师 们 经 常会 跟 频 繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 
终于 是 要 感 澳 像 Jeffrcy Zeldran 和 aric Heyer 这 样 的 思想 革新 者， 聪明 的 设 

计 师 们 慢 慢 的 接受 了 相对 更 语义 化 的 

布局 普 代 了 table 布 局， 并 且 开始 调用 外 部 样式 表 。 但 不 幸 的 是 ,复杂 的 网 页 
ee 我 们 把 E 叫 做“ 出 


图 5-8 段落 标记 的 使 用 
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5.2.2 ”标题 标记 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 


文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 


HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 


1<h1> 到 <h6> 元 素来 定义 ，<h1> 


至 <h6> 标 题 标记 中 的 字母 h 是 英文 headline (标题 行 ) 的 简称 
最 高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 
【 例 5.6】“《 实 例文 件 : ch05\5.6.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title> 文 本 段 换 行 <title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </hl> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </hs> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-9 所 示 。 


。 其 中 <h1> 代 表 1 级 标题 ， 级 别 


”WC | 
We echoNs. shtml P- CX 
沪 坊 (5) 


司 文 = 所 六 行 


文件 由 剖 看 (V) 效 项 闪 (A) 工具 (T) 帮助 (H) 


Eo 


这 里 是 1 级 标题 
这 里 是 2 级 标题 

这 里 是 3 级 标题 

这 里 是 4 级 标题 

这 里 是 级 标题 


这 里 是 6 级 标 是 


图 5-9 标题 标记 的 使 用 


Os 作为 标题 ,它们 的 重要 性 是 有 区 别 的 ,其 中 <hl> 标 题 的 重要 性 最 高 ，<h6> 的 最 低 。 


注意 


局 
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5.3 ”建立 文本 列表 


使 用 文本 列表 可 以 有 序 地 编排 一 些 信息 资源 , 使 其 结构 化 和 条 理化 , 并 以 列表 的 样式 显示 
出 来 ， 以 便 浏览 者 能 更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编辑 软件 Word 
中 的 项 目 符号 和 自动 编号 。 

5.3.1 建立 无 序列 表 

无 序列 表 相当 于 Word 中 的 项 目 符号 , 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 项 

标识 。 无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></li>， 其 结构 如 下 所 示 。 


<u> 
<li> 无 序列 表 项 </li> 
<li> 无 序列 表 项 </li> 
<li> 无 序列 表 项 </li> 
<li> 无 序列 表 项 </li> 
</ul> 


在 无 序列 表 结 构 中 ， 使 用 <ul></ul> 标 记 表 示 这 个 无 序列 表 的 开始 和 结束 ，<li> 则 表示 一 个 
列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结 束 标记 。 下 面 的 
实例 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 5.7】 “实例 文件 :ch0s\5.7.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 慌 套 无 序列 表 的 使 用 <jtitle> 
</head> 


<body> 
<hl> 网 站 建设 流程 < hl> 
<ul> 
<li> 项 目 需求 <li> 
<li> 系 统 分 析 
<uUl> 
<I 户 网 站 的 定位 </li> 
<I 记 内容 收集 </li> 
<I 记 栏目 规划 </li> 
<I 户 网 站 目录 结构 设计 </li> 
<]i 这 网 站 标志 设计 </li> 
<I 户 网 站 风格 设计 </li> 
<I 户 网 站 导航 系统 设计 </li> 
</u> 


在 IE9.0 中 的 预览 效果 如 图 5-10 所 示 。 读 者 会 发 现 ， 无 序列 表 项 中 ， 可 以 风 套 一 个 列表 。 
如 代码 中 的 “系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 级 列表 , 因此 在 这 对 <li></I> 
标记 间 又 增加 了 一 对 <ul></uP> 标 记 。 


men 7h D- ex| ser “| | 


. 
。 制 作 网 页 草图 
。 将 草图 转 淆 为 网 页 


,网 页 布局 
“网 站 员 斌 
。 站 点 的 发 市 与 站 点 管理 


图 5-10 无 序列 表 
5.3.2 ”建立 有 序列 表 
有 序列 表 类 似 于 Word 中 的 自动 编号 功能 , 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 基 


本 相同 ， 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 分 ， 
多 数 用 数字 表示 ， 其 结构 如 下 : 


HTMmL 


下 面 实例 使 用 有 序列 表 实现 文本 的 排列 显示 。 
【 例 5.8】 实例 文件 : ch05\5.8.html) 


在 IE9.0 中 的 预览 效果 如 图 5-11 所 示 ， 用 户 可 以 看 到 新 添加 的 有 序列 表 。 


图 5-11 有 序列 表 的 效果 
5.3.3 ”建立 不 同类 型 的 无 序列 表 


通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 
【 例 5.9】 《实例 文件 : ch05\5.9.html) 


94 。 


在 IE 9.0 中 的 预览 效果 如 图 5-12 所 示 。 


图 5-12 不 同类 型 的 无 序列 表 
5.3.4 ”建立 不 同类 型 的 有 序列 表 
通过 使 用 多 个 <ol> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 


HTmL 5 


【 例 5.10】〔 实 例文 件 ， ch05\5.10.html) 


在 IE9.0 中 的 预览 效果 如 图 5-13 所 示 。 


5-13 不 同类 型 的 有 序列 表 


5.3.5” 嵌 套 列表 


惨 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 顽 套 列表 。 
【 例 5.11】 《实例 文件 :ch05\5.11.html) 


。96。 


在 IE 9.0 中 的 预览 效果 如 图 5-14 所 示 。 


图 5-14 超 套 列表 
5.3.6” 自 定义 列表 


在 HTML 5 中 还 可 以 自 定义 列表 ， 标 签 是 <dl>。 
【 例 5.12】《 实 例文 件 ，ch05\5.12.html) 
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<d> 
<d 己 电脑 </dc> 
<dd> 是 一 种 能 够 按照 程序 运行 的 电子 设备 …….</dd> 
<d 己 显示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 ……</dd> 
</dl> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-15 所 示 。 


4 SI 5 ra 
ee eB] HAUsersAdminist PD - © X | @ HA\UsersAdmin 


文件 (月 ” 蝙 蚀 (E) 各 看 (V) 收藏 关 (A) 工具] 帮助 H) 


一 个 定义 列表 : 


电脑 i 
_ 是 一 种 能 够 按照 程序 运行 的 电子 设备 ……. 


7 
以 视觉 方式 显示 信息 的 装置 ..，.…. 


图 5-15 自 定 义 列表 
5.4 添加 图 像 
俗话 说 “一 图 胜 千言 ”， 图 片 是 网 页 中 不 可 缺少 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 为 
网 页 增色 不 少 。 网 页 支持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设 置 宽度 和 高 度 。 
5.4.1 网 页 支持 的 图 片 格式 
图 像 在 网 页 中 具有 画龙点睛 的 作用 ， 它 能 装饰 网 页 ， 表 达 个 人 的 情调 和 风格 。 但 在 网 页 上 


加 入 的 图 片 越 多 ， 浏 览 的 速度 就 会 受到 影响 。 网 页 中 使 用 的 图 像 可 以 是 GIF、JPEG、BMP、 
TIFF、PNG 等 格式 的 图 像 文件 ， 其 中 使 用 最 广泛 的 主要 是 GIF 和 卫 了 EG 两 种 格式 。 

1. GIF 格式 

GIF 格式 是 由 Compuserve 公司 提出 的 与 设备 无 关 的 图 像 存储 标准 ,也 是 Web 上 使 用 最 早 、 
应 用 最 广 的 图 像 格 式 。GIF 是 通过 减少 组 成 图 像 像素 的 存储 位 数 和 LZH 压缩 存储 技术 来 减少 
图 像 文 件 大 小 的 ，GIF 格式 最 多 只 能 是 256 色 的 图 像 。 

GIF 具有 图 像 文 件 短小 、 下 载 速度 快 的 特点 ， 在 低 颜 色 数 下 GIF 比 JPEG 装载 更 快 ， 可 月 
许多 具有 同样 大 小 的 图 像 文 件 组 成 动画 ， 在 GIF 图 像 中 可 指定 透明 区 域 ， 使 图 像 具 有 非 同一 
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般 的 显示 效果 。 
2.， JPEG 格式 


JPEG 格式 是 在 目前 Intemet 中 最 受 欢迎 的 图 像 格式 ，JPEG 可 支持 多 达 16MB 的 颜色 ， 能 
展现 十 分 生动 的 图 像 , 还 能 压缩 但 压缩 方式 是 以 损失 图 像 质量 为 代价 的 ， 压缩 比 越 高 图 像 质 
量 损 失 越 大 ， 图 像 文 件 也 就 越 小 。 

而 Windows 支 持 位 图 BMP 格 式 的 图 像 ,一 般 情况 下 ,同一 图 像 的 BMP 格 式 的 大 小 是 JPEG 
格式 的 5~10 信 。 而 GIF 格式 最 多 只 能 是 256 色 ， 因 此 载 入 256 色 以 上 图 像 的 JPEG 格式 成 了 
Internet 中 最 受 欢迎 的 图 像 格 式 。 

当 网 页 中 需要 载 入 一 个 较 大 的 GIF 或 JPEG 图 像 文件 时 ， 装 载 速度 会 很 慢 。 为 改善 网 页 的 
视觉 效果 ， 可 在 载 入 时 设置 为 隔行 扫描 。 隔 行 扫描 在 开始 显示 图 像 时 看 起 来 非常 模糊 ， 接 着 细 
节 逐 渐 添 加 上 去 直到 图 像 完全 显示 出 来 。 


现在 网 页 中 也 有 很 多 PNG 格式 的 图 片 。PNG 图 片 具 有 不 失真 、 兼 有 GIF 和 JPG 
的 色彩 模式 、 网 络 传输 速度 快 、 支 持 透明 图 像 制作 的 特点 ， 近 年 来 在 网 络 中 也 很 
注意 流行 。 


5.4.2 ”在 网 页 中 使 用 路 径 


HTML 文档 支持 文字 、 图 片 、 声 音 、 视 频 等 媒体 格式 ， 但 是 在 这 些 格式 中 ， 除 了 文本 是 
写 在 HTML 中 的 ， 其 他 都 是 嵌入 式 的 ，HTML 文档 只 记录 了 这 些 文件 的 路 径 。 这 些 媒体 信息 
能 否 正确 显示 ， 路 径 是 至 关 重 要 的 。 

路 径 的 作用 是 定位 一 个 文件 的 位 置 。 文件 的 路 径 可 以 有 两 种 表述 方法 ,以 当前 文档 为 参照 
物 表示 文件 的 位 置 ， 即 相对 路 径 。 以 根 目录 为 参照 物 表 示 文 件 的 位 置 ， 即 绝对 路 径 。 

为 了 方便 讲述 绝对 路 径 和 相对 路 径 ， 可 参考 下 面 的 目录 结构 ， 如 图 5-16 所 示 。 


图 5-16 目录 结构 
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1. 绝对 路 径 


例如 ,在 E 盘 的 webs 目录 下 的 images 下 有 一 个 tpjpg 图 像 ， 那 么 它 的 路 径 就 是 
E:\webs\images\tp.jpg; 像 这 种 完整 地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 如 果 将 图 片 文 件 tp.jpg 
插入 到 网 页 index.html 中 ， 绝 对 路 径 表 示 方 式 如 下 : 


E:\webs\images\tp.jpg 


如 果 使 用 了 绝对 路 径 E\webs\imagestpjpg 进 行 图 片 链接 ,那么 在 本 地 计算 机 中 将 一 切 正 常 ， 
因为 在 EN\webs\images 下 的 确 存在 tp.jpg 这 个 图 片 。 如 果 将 文档 上 传 到 网 站 服务 器 上 ， 就 不 会 正 
常 了 ， 因 为 服务 器 划分 的 存放 空间 可 能 在 E 盘 其 他 目录 中 ， 也 可 能 在 D 盘 其 他 目录 中 。 为 了 保 
证 图 片 正常 显示 ， 必 须 从 webs 文件 夹 开 始 ， 放 到 服务 器 或 其 他 计算 机 的 EE 盘 根 目录 下 。 

通过 上 述 讲解 ， 读 者 会 发 现 ， 如 果 链 接 的 资源 是 本 站 点 内 的 ， 则 使 用 绝对 路 径 对 位 置 要 
求 非常 严格 。 因 此 ， 链 接 本 站 内 的 资源 时 不 建议 采用 绝对 路 径 。 如 果 链 接 其 他 站 点 的 资源 ， 则 
必须 使 用 绝对 路 径 。 

2. 相对 路 径 


如 何 使 用 相对 路 径 设置 上 述 图 片 呢 ? 所 谓 相 对 路 径 ， 顾 名 思 义 就 是 以 当前 位 置 为 参考 点 ， 
自己 相对 于 目标 的 位 置 。 例 如 ， 在 index.html 中 连接 tp.jpg 就 可 以 使 用 相对 路 径 。index.html 
和 tp.jpg 图 片 的 路 径 根 据 上 述 目 录 结 构图 可 以 这 样 来 定位 ,从 index.html 位 置 出 发 , 它 和 images 
属于 同 级 ， 路 径 是 通 的 ， 因 此 可 以 定位 到 images，images 的 下 级 就 是 tp.jpg。 使 用 相对 路 径 表 
示 图 片 如 下 : 


images/tp.jpg 

使 用 相对 路 径 ， 无 论 将 这 些 文件 放 到 哪里 ， 只 要 tp.jpg 和 index.html 文件 的 相对 关系 没有 

在 相对 路 径 中 ，“..” 表 示 上 一 级 目录 ，“../.” 表 示 上 级 的 上 级 目录 ， 依 此 类 推 。 例 如 ， 
将 tpjpg 图 片 插入 到 a.html 文件 中 ， 使 用 相对 路 径 表 示 如 下 : 


.Jimages/tp.jpg 
(7 细心 的 读者 会 发 现 ， 路 径 分 隔 符 使 用 了 “\” 和 “/” 两 种 ， 其 中 “\” 表 示 本 地 分 


隔 符 ，“/” 表 示 网 络 分 隔 符 。 因 为 网 站 制作 好 后 肯定 是 在 网 络 上 运行 ， 因 此 要 求 
注 最 使用“/” 作 为 路 径 分 隔 符 。 


有 的 读者 可 能 会 有 这 样 的 疑惑 : 一 个 网 站 有 许多 的 链接 ， 怎 么 能 保证 它们 的 链接 都 正确 ， 
如 果 调 整 了 图 片 或 网 页 的 存储 路 径 ， 那 不 是 全 乱 了 吗 ? 如 何 提高 工作 效率 呢 ? 


@! Dreamweaver 工具 的 站 点 管理 功能 , 不 但 可 以 将 绝对 路 径 自动 地 转化 为 相对 路 径 ， 
并 且 当 在 站 点 中 改动 文件 路 径 时 ， 与 这 些 文 件 关联 的 链接 路 径 都 会 自动 更 改 。 


不 


“100 。 
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5.4.3 ”在 网 页 中 插入 图 像 
图 像 可 以 美化 网 页 ， 插 入 图 像 使 用 单 标记 <img>。<img> 标 记 的 属性 及 描述 如 表 5-2 所 示 。 
表 5-2 img 标记 的 属性 及 描述 


属性 值 描述 
alt text 定义 有 关 图 形 的 描述 
sre URL 要 显示 的 图 像 的 URL 
height pixels % 定义 图 像 的 高 度 
ismap URL 把 图 像 定义 为 服务 器 端的 图 像 映射 
定义 作为 客户 端 图 像 映射 的 一 幅 图 像 ， 请 参阅 <map> 和 <area> 标 签 ， 了 解 
usemap URL i a 
其 工作 原理 
vspace pixels 定义 图 像 项 部 和 底部 的 空白 ， 请 使 用 CSS 代替 
pixels % 设置 图 像 的 宽度 
1. 插入 图 像 
src 属性 用 于 指定 图 片 源 文件 的 路 径 ， 它 是 img 标记 必 不 可 少 的 属性 。 语 法 格式 如 下 : 
<img src=" 图 片 路 径 "> 


图 片 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 下 面 的 实例 是 在 网 页 中 插入 图 片 。 


【 例 5.13】 《实例 文件 ，ch0S\5.13.html) 


<!DOCTYPE html> 


<html> a achos\s ohml P -cx| Bi 和 ®* 
<head> 文件 (站 ” 奖 强 (E) 得 看 (V) ” 效 巷 交 (A) ”工具 (T) 帮助 (H) 


<title> 插 入 图 片 <ltitle> 
</head> 
<body> 
<img src="images/meishi.jpg"> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-17 所 示 。 
2. 从 不 同位 置 插 入 图 像 


在 插入 图 片 时 ， 用户 可 以 将 其 他 文件 夹 或 服 图 5.17 插入 图 片 
务 器 的 图 片 显 示 到 网 页 中 。 
【 例 5.14】〔 实 例文 件 : ch05\5.14.html) 


<!DOCTYPE html> 
<html> 
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<body> 
<p> 
来 自 一 个 文件 夹 的 图 像 : 


<img src="images/meishi.jpg" /> 


</p> 
<p> 
来 自 baidu 的 图 像 : 


<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" /> 


</p> 
</body> 
</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-18 所 示 。 


0 . 
Bai 人 i 百度 


来 自 beidu 的 图 像 ， 


图 5-18 插入 图 片 
5.5 ”编辑 图 像 
在 插入 图 片 时 ， 用 户 还 可 以 编辑 网 页 中 的 图 像 。 
5.5.1 设置 图 像 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 也 可 以 设置 显 
示 尺 寸 。 设 置 图 像 尺 寸 分 别 用 属性 width〈 宽 度 ) 和 height 高度) 。 
【 例 5.15】《〔 实 例文 件 :， ch05\5.15.html) 


<!DOCTYPE html> 


<html> 
<head> 
<title> 插 入 图 片 <title> 
</head> 
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<body> 

<img src="images/meishi.ipg"> 

<img src="images/meishi.jpg" width="200"> 

<img src="images/meishi.jpg" width="200" height="300"> 
</body> 

</html 


在 IE 9.0 中 的 预览 效果 如 图 5-19 所 示 。 


3] a wars ana saosin P - Cx|@se- 


图 5-19 设置 图 片 的 宽度 和 高 度 

由 上 图 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width (宽度 ) 和 height (高 度 ) 控制 的 。 当 只 为 

图 片 设置 一 个 尺寸 属性 时 , 另外 一 个 尺寸 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 
以 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 。 


【分 对 于 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 ， 图 像 会 出 现 马赛 克 ， 变 得 模糊 。 
注 意 
在 Windows 中 查看 图 片 的 尺寸 , 只 需要 找到 图 像 文件 , 把 鼠标 指针 移动 到 图 像 上 ， 


停留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 数字 ， 
提 示 。 代表 图 像 的 宽度 和 高 度 ， 如 256 x 256。 


5.5.2 ”设置 图 像 的 提示 文字 


图 像 提 示 文 字 的 作用 有 两 个 : 一 是 当 浏 览 网 页 时 ， 如果 图 像 下 载 完 成 , 将 鼠标 指针 放 在 该 
图 像 上 ,鼠标 指针 旁边 会 出 现 提示 文字 ， 为 图 像 添加 说 明 性 文字 ; 二 是 ， 如 果 图 像 没有 成 功 下 
载 ， 在 图 像 的 位 置 上 就 会 显示 提示 文字 。 

随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 因素 ， 因 此 一 般 都 能 成 功 下 载 图 像 。 现 在 ， 它 
还 有 另外 一 个 作用 ， 即 在 百度 、Google 等 大 搜索 引擎 中 ， 搜 索 图 片 不 如 文字 方便 ， 如 果 给 图 
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片 添加 适当 提示 ， 可 以 方便 搜索 引擎 的 检索 。 
下 面 的 实例 将 为 图 片 添加 提示 文字 效果 。 
【 例 5.16】〔 实 例文 件 : ch05\5.16.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<img src="images/meishi.jpg" alt=" 草 蓉 甜 检 沙 拉 "> 
</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-20 所 示 。 用 户 将 鼠标 放 在 图 片上 时 ， 即 可 看 到 提示 文字 。 


图 5-20 ”图片 文字 提示 


【分 在 Firefox 中 不 支持 该 功能 。 


注 意 
5.5.3 ”设置 图 片 为 网 页 背景 
在 插入 图 片 时 ， 用 户 可 以 根据 需要 将 某 些 图 片 设置 为 网 页 的 背景 。GIF 和 JPG 文件 均 可 


作 HTML 背景 。 如 果 图 像 小 于 页 面 ， 图 像 会 进行 排列 。 
【 例 5.17】 《实例 文件 :ch05\5.17.html) 


<!DOCTYPE html> 
<html> 
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<body background="images/background.jpg"> 
<h3> 图 像 背 景 <h3> 

</body> 

</html> 


在 IE 9.0 中 的 预览 效果 如 图 5-21 所 示 。 


FE 区 可 
HUserswdminitt D » © X | @ HAuUserswdminisr。 x| 
久 强 (E)】 。 豆 看 (V) 收 营 实 (A) 工具 (T) 帮 贡 (H) 


图 5-21 图 片 背 景 


5.5.4 ”排列 图 像 


在 网 页 的 文字 当中 ， 如 果 插 入 图 片 ， 这 时 可 以 对 图 像 进行 排序 。 常 用 的 排序 方式 为 居中 、 
底部 对 齐 、 顶 部 对 齐 。 
【 例 5.18】〔 实 例文 件 ，ch05\5.18.html) 


<!DOCTYPE html> 

<html> 

<body> 

<h2> 未 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src ="images/logo.gif'> 在 文本 中 </p> 

<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src=" images/logo.gif " align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="middle"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="top"> 在 文本 中 </p> 
</body> 

</html> 


在 I 正 9.0 中 的 预览 效果 如 图 5-22 所 示 。 
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| 


| avser manniswon PD -~ Gx | @ teere sdmirisrato. x m3 
HN RE SEM CHAN IRM Rom 


未 设置 对 齐 方 式 的 图 像 : 


.800 
aaBai@ 国 片 ..- 
已 设置 对 齐 方式 的 图 像 : 


0000, 
ae Bai 人 全国 片  .- 


(1 
* Bai 人 i 国 片 一 


图 在 文本 中 


a 00 
Bai 红 图 片 J 
图 5-22 图 片 对齐 方式 


Os bottom 对 齐 方式 是 默认 的 对 齐 方式 。 


注意 
5.6 ”综合 实例 一 一 图 文 并 茂 的 房屋 装饰 装修 网 页 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 综合 实例 要 创建 一 个 由 文本 和 图 片 构 
成 的 房屋 装饰 效果 网 页 ， 如 图 5-23 所 示 。 


Py 


[a anh Vone hm D - > x FT "| Ca 
交 件 有 网 蚂 E) 时 盏 NV] 太 要 (A 工具 站 大 描 I) 


清末 活力 家 居 与 人 文 简约 悠然 守 居 


图 5-23 ”房屋 装饰 效果 网 页 
具体 操作 步骤 如 下 。 
to 在 Dreamweaver CS5.5 中 新 建 HTML 文档 ， 并 修改 成 HTML 5 标准 ， 代 码 如 下 : 


<!DOCTYPE html> 


i060 
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<html > 

<head> 

<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 


W02 在 body 部 分 增加 如 下 HTML 代码 ， 保 存 页 面 : 


<p><img src="images/xiyatu.jpg" width="300" height="200"/><img src="images/stadshem.jpg" width="300" 
height="200"/><br /> 

西雅图 原生 态 公寓 室内 设计 与 Stadshem 小 户型 公寓 设计 〈 带 阁楼 ) </p> 

<hr 记 > 

<p><img src="images/qingxinhuolijpg"” width="300" height="200"/><img src="images/renwen.jpg" 
width="300" height="200"/><br /> 

清新 活力 家 居 与 人 文 简约 悠然 家 居 </p> 

<hr/> 


OP TT 
注意 它 没有 任何 属性 。 


另外 ， 快 速 插入 图 片 及 设置 相关 属性 ， 可 以 借助 Dreamweaver CS5.5 的 插入 功能 ， 或 按 下 
快捷 键 Ctrl+Alt+I。 


5.7 ”问题 解答 


1. 换行 标记 和 段落 标记 有 哪些 区 别 ? 

换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标记 是 双 标记 ， 可 以 省 略 结 束 标记 ， 也 可 以 不 
省 略 。 默 认 情况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间 距 是 不 同 的 ， 段 落 间 距 比 较 大 ， 行 间距 
比较 小 。HTML 无 法 调整 段落 间距 和 行 间距 ， 如 果 希 望 调整 它们 ， 就 必须 使 用 CSS。 在 
Dreamweaver CS5.5 的 设计 视图 下 ， 按 下 Enter 键 可 以 快速 换 段 ， 按 下 Shift+ Enter 键 可 以 快速 
换行 。 

2. 无 序列 表 <ul> 元 素 具 有 什么 作用 ? 

无 序列 表 元 素 主要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 , 无 序列 表 在 制作 导航 菜 
单 时 使 用 广泛 ， 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实现 。 


3. 在 浏览 器 中 ， 图 片 无 法 显示 ， 为 什么 ? 
图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 保存 在 网 页 中 的 ， 网 页 只 是 保存 了 指向 图 片 的 路 径 。 
浏览 器 在 解释 HTML 文件 时 ， 会 按 指 定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存在 图 片 ， 
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就 无 法 正常 显示 。 为 了 保 订 


E 图 片 的 正常 显示 ， 人 制作 网 页 时 需要 注意 以 下 几 点 。 


@ 图 片 格式 一 定 是 网 


页 支持 的 ; 


@ 图 片 的 路 径 一 定 要 正常 ， 并 且 图 片 文件 扩展 名 不 能 省 略 ; 


@ HTML 文件 位 置 发 
终 保 持 相对 一 致 。 


[1 从; 


生 改 变 时 ,图 片 一 定 要 随 着 改变 ， 即 图 片 位 置 和 HTML 文件 位 置 始 


第 6 章 使 用 HTML 5 建立 超 链 接 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 ， 超 链接 是 一 个 网 站 的 灵魂 ，Web 上 的 网 页 
是 互相 链接 的 ， 单 击 超 链接 的 文本 或 图 形 就 可 以 链接 到 其 他 页 面 。 


6.1 URL 


URL 就 是 人 们 通常 说 的 “网 址 ”， 用 于 指定 Intemet 上 的 资源 位 置 。 
6.1.1 URL 的 格式 


网 络 中 的 计算 机 之 间 是 通过 IP 地 址 区 分 的 ， 如 果 希 望 访问 网 络 中 某 台 计算 机 中 的 资源 ， 
首先 要 定位 到 这 台 计 算 机 。IP 地 址 由 32 位 的 二 进 制 , 即 32 个 0/1 代码 组 成 ， 数 字 之 间 没 有 意 
义 ， 不 容易 记忆 。 为 了 方便 记忆 ,现在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 使 用 一 
组 具有 特殊 意义 的 字符 组 成 的 地 址 代替 IP 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”、“ 主 机 名 ”、“ 文 件 夹 名 ”和 “文件 名 ”， 如 图 6-1 
所 示 。 
http://www. wobDesign. com/pages/computer. html 


| 
协议 主机 名 文件 夹 名 文件 名 


图 6-1 URL 组 成 
互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 对 应 相应 的 协 


议 , 通常 通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP 协议 ， 即 “ 超 文本 传输 协议 ”， 因 此 通常 网 页 
的 地 址 都 以 http:/ 开 头 。 


www.baidu.com 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服务 器 ， 主 机 名 可 以 通过 IP 地 址 或 者 域 
名 来 表示 。 

确定 到 主机 后 , 还 需要 说 明文 件 存 在 于 这 台 服 务 器 的 哪个 文件 夹 中 , 这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后 ， 就 要 定位 到 文件 ， 即 要 显示 哪个 文件 ， 网 页 文件 通常 是 以 .html 或 .htm 为 
扩展 名 。 


6.1.2 URL 的 类 型 


在 第 5 章 讲解 网 页 中 使 用 图 像 时 ， 已 经 介绍 了 “路 径 ” 的 概念 。 对 于 超 链 接 来 说 ， 路 径 的 
概念 同样 存在 。 
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超 链接 的 URL 可 以 分 为 两 种 类 型 “绝对 URL” 和 “相对 URL”。 

(1) 绝对 URL 一 般 用 于 访问 非 同 一 台 服 务 器 上 的 资源 。 

(2) 相对 URL 是 指 访问 同一 台 服 务 器 上 相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 
同文 件 夹 中 的 文件 ， 只 需要 写 文 件 名 ; 如 果 访 问 不 同文 件 夹 中 的 资源 ，URL 以 服务 器 的 根 目 
录 为 起 点 ， 指 明文 档 的 相对 关系 ， 由 文件 夹 名 和 文件 名 两 部 分 构成 。 

下 面 的 实例 为 使 用 绝对 URL 和 相对 URL 实现 超 链接 。 

【 例 6.1】〔 实 例文 件 ，ch06\6.1.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绝 对 URL 和 相对 URL</title> 

</head> 

<body> 
单 击 <a href="http://www.webDesign.com/index.html"> 绝 对 URL</a> 链 接 到 webDesign 网 站 首页 <br /> 
单 击 <a href="02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br /> 
单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 

</body> 

</html> 


在 上 述 代码 中 ， 第 一 个 链接 使 用 的 是 绝对 URL; 第 二 个 使 用 的 是 服务 器 相对 URL， 也 就 
是 链接 到 文档 所 在 服务 器 的 根 目录 下 的 02.html; 第 三 个 使 用 的 是 文档 相对 URL， 即 原文 档 所 
在 文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03.html 文件 。 

在 IE 9.0 中 预览 网 页 效果 ， 如 图 6-2 所 示 。 


文件 (D。 骗 镀 E) 下 看 (V) 收 京 交 (A| 工具 (D) 。 帮助 (H) 

单 击 绝 对 URL 链 接 到 webDesign 网 站 首页 

单 击 相 同文 忻 夫 的 URL 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 
单 击 至 司 文件 去 的 URL 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 


图 6-2 绝对 URL 和 相对 URL 


6.2 ”创建 超 链接 


超 链接 就 是 当 用 鼠标 单 击 一 些 文字 、 图 片 或 其 他 网 页 元 素 时 , 浏览 器 就 会 根据 其 指示 载 入 


一 个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 链接 除了 可 链接 文本 外 ,也 可 链接 各 种 媒体 ， 如 声 
音 、 图 像 、 动 画 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超 链 接 所 使 用 的 HTML 标记 为 <a> 和 </a>。 超 链接 最 重要 的 有 两 个 要 素 : 设置 为 超 链 
接 的 网 页 元 素 和 超 链接 指向 的 目标 地 址 。 超 链接 的 基本 结构 如 下 : 


<a href=URL> 网 页 元 素 </a> 
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6.2.1 设置 文本 和 图 片 的 超 链 接 


设置 超 链接 的 网 页 元 素 通常 使 用 文本 和 图 片 。 文 本 超 链接 和 图 片 超 链接 通过 <a></a> 标 记 
实现 ， 将 文本 或 图 片 放 在 <a> 开 始 标 记 和 </a> 结 束 标 记 之 间 即 可 建立 超 链接 。 下 面 的 实例 将 实 
现 文本 和 图 片 的 超 链接 。 

【 例 6.2】“《 实 例文 件 : ch06\6.2.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 和 图 片 超 链接 </title> 

</head> 

<body> 

<a href="a.html"><img src="images/0371.gif"></a> 
<a href="b.html"> 公 司 简 介 </a> 

</body> 

</html> 


在 IE9.0 中 预览 网 页 效果 ， 如 图 6-3 所 示 ， 单 击 图 片 即 可 实现 链接 跳 转 的 效果 。 


EF=-Ee-En 
A 
( SL»] 司 CAUsersyingda\t PD - CO XB: 


文件 篇 句 (5) 查看 (V) 收藏 天 (A) ”工具 (0) 1” 


图 6-3 文本 和 图 片 链接 效果 


链接 图 片 的 外 观 在 不 同 浏览 器 中 的 效果 也 不 尽 相同 , 例如 在 Firefox 中 的 预览 效果 
注 如 图 6-4 所 示 。 


由 公司 简介 


图 6-4 Firefox 浏览 器 预览 效果 
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【分 在 Firefox 中 ， 图 片 超 链接 不 会 增加 边框 ， 而 在 IE 中 ， 图 片 超 链接 会 增加 边框 。 
注 意 

默认 情况 下 ， 为 文本 添加 超 链接 ， 文 本 会 自动 增加 下 划 线 ， 并 且 文 本 颜色 变 为 蓝 色 ， 单 击 
过 的 超 链 接 , 文本 会 变 成 暗 红色 。 图 片 增加 超 链接 以 后 , 浏览 器 会 自动 给 图 片 增加 一 个 粗 边框 。 


6.2.2 ”设置 超 链接 指向 的 目标 类 型 


通过 上 面 的 讲解 ， 读 者 会 发 现 超 链接 的 目标 对 象 都 是 .html 类 型 的 文件 。 超 链接 不 但 可 以 
链接 到 各 种 类 型 〈 如 图 片 文 件 、 声 音 文件 、 视 频 文件 、Word 文件 等 ) 的 文件 ， 还 可 以 链接 到 
其 他 网 站 、ftp 服务 器 、 电 子 邮 件 等 。 


1. 链接 到 各 种 类 型 的 文件 


超 链接 <a> 标 记 的 href 属性 是 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 。 如 果 是 浏览 
器 能 够 识别 的 类 型 ， 会 直接 在 浏览 器 中 显示 ; 如果 是 浏览 器 不 能 识别 的 类 型 ， 在 正 浏览 器 中 
会 弹出 文件 下 载 对 话 框 ， 如 图 6-5 所 示 。 
Windows Internet Explorer 区 到 
您 要 对 2.doc 执行 什么 操作 ? 
大 小 : 10.5 KB 


类 型: Microsoft Word 97 - 2003 
来 自 : C\Users\yingda\Desktop\ 源 代码 \ch04\ 链 接 到 各 种 类 型 文件 


久 打开 (O) 
将 不 会 自动 保存 该 文件 . 


省 保存 (S) 


沪 另存 为 (A) 


图 6-5 IE 中 的 文件 下 载 对 话 框 
【 例 6.3】〔 实 例文 件 ，ch06\6.3.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 链 接 各 种 类 型 文件 </title> 

</head> 

<body> 

<p><a href="a.html"> 链 接 html 文件 </a></p> 
<p><a href="coffe.jpg"> 链 接 图 片 </a></p> 
<p><a href="2.doc"> 链 接 word 文档 </a></p> 
</body> 
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</html> 


在 IE9.0 中 预览 网 页 效果 ， 如 图 6-6 所 示 ， 实 现 了 链接 到 html 文件 、 图 片 和 Word 文档 。 


[=-[5 
(3 羡 cAUsersyingda\5 DP- CX| 屋 色 


文件 (月 ” 编 铝 (E) ”查看 V) ”收藏 夫 (A) 工具 mm i” 
链接 html 文 件 


图 6-6 各 种 类 型 的 链接 
2. 链接 到 其 他 网 站 或 ftp 服务 器 
在 网 页 中 ， 友 情 链接 也 是 推广 网 站 的 一 种 方式 。 下 列 代码 实现 了 链接 到 其 他 网 站 或 ft 服 
务 器 的 目的 。 


<a hre 伟 "http:Wwww.baidu.com"> 链 接 百 度 </a> 
<a href="ftp://172.16.1.254"> 链 接 到 ftp 服务 器 </a> 


这 里 服务 器 用 的 是 IP 地址。 为 了 保证 代码 的 正确 运行 ， 请 读者 填写 有 效 的 ftp 

ee 服务 器 地 址 。 
注 意 
3. 设置 电子 邮件 链接 


在 某 些 网 页 中 , 当 访 问 者 单 击 某 个 链接 以 后 , 会 自动 打开 电子 邮件 客户 端 软件 , 如 Outlook 
或 Foxmail 等 ， 向 某 个 特定 的 E-mail 地 址 发 送 邮件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 子 邮 件 
链接 的 格式 如 下 : 


<a href="mailto: 电 子 邮 件 地 址 " > 网 页 元 素 </a> 
【 例 6.4】“《 实 例文 件 : ch06\6.4.html) 


<!DOCTYPE html> 
<html> 

<head> 

<title> 电 子 邮 件 链接 </title> 

</head> 

<body> 

<img src="images/logo.gif" width="119" height="49"> [免费 注册 ][ 登 录 ] 
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<a href="mailto:kfdzsj@126.com"> 站 长 信箱 </a> 
</body> 
</html> 


在 IE 9.0 中 预览 网 页 效果 如 图 6-7 所 示 ， 实 现 了 电子 邮件 链接 。 


[= 


(3 司 fi 可 whosk4html P - 0 X | SsHs 


文件 月” 妨 岛 {E) 可 看 (V) 效 宕 夫 (A) 工具 (T) 帮助 (H) 


IBEXSG 哆 费 注册 ][ 登 录 ] 站 长 信箱 


图 6-7 链接 到 电子 邮件 


当 读者 单 击 “ 站 长 信箱 ”链接 时 ， 会 自动 弹出 Outlook 窗口 ， 要 求 编写 电子 邮件 ， 如 图 
6-8 所 示 。 


EE > 未 命名 - 郎 件 (HTMU i 
名 全 | 搬入。 流 顺 。 设置 格式 。 市 阅 三 可 
庙 % a A ) 
粘贴 吕 BIU| 汪 - 丘 -| 庚 鱼 | 姓名 名 了 0 项 目 ” 重要 性 -高 

FEM 
”可 | 岁 -A-| 匡 要 洗 岂 | 多 - 好 重要 性 - 低 
和 了 板 避 六 本 六 本 i ese Pe 
帮 件 人 “| [fdsj128 com | 
把 (OO.. | 
主 时: | | 
+ 司 


图 6-8 Outlook 新 邮件 窗口 
6.2.3 用 新 窗口 显示 超 链 接 页 面 


默认 情况 下 ， 当 单 击 超 链 接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 , 替换 当前 页 面 的 内 容 。 如 
果 要 在 单 击 某 个 链接 以 后 , 打开 新 的 浏览 器 窗口 并 在 这 个 新 窗口 中 显示 目标 页 面 , 就 需要 使 用 
<a> 标 签 的 target 属性 。 

target 属性 的 取 值 有 4 个 ， 分 别 是 “_ blank”、“_ self”、“ top” 和 “_parent”。 由 于 
HTML 5 不 再 支持 框架 ,所 以 ' top”” parent” 这 两 个 取 值 不 常用 .本 节 仅 为 读者 讲解 ”blank”、 
“_self” 值 。 其 中 ，“_blank” 值 为 在 新 窗口 中 显示 超 链 接 页 面 ，“_self” 代 表 在 自身 窗口 中 
显示 超 链接 页 面 ， 当 省 略 target 属性 时 ， 默 认 取 值 为 “_self”。 


“114 。 


【 例 6.5】 〈 实 例文 件 : ch06\6.5.html) 


/bc 


在 IE 9.0 中 预览 网 页 效果 ， 如 图 6-9 所 示 。 


图 6-9 新 窗口 页 面 
6.2.4 ”如 何 链接 到 同一 页 面 的 不 同位 置 


在 建立 链接 时 , 尤其 是 文字 比较 多 的 网 页 ， 需要 在 同一 页 面 的 不 同位 置 进行 链接 , 这 时 就 
需要 建立 同一 网 页 内 的 链接 。 
【 例 6.6】 实 例文 件 ，ch06\6.6.html) 


在 IE 9.0 中 预览 网 页 效果 ， 如 图 6-10 所 示 。 


图 6-10 链接 页 面 
单 击 页 面 中 的 链接 ， 即 可 将 “第 4 章 ” 的 内 容 跳 转 到 页 面 项 部， 如 图 6-11 所 示 。 
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OS 芒 filey//Hi/Users/Ad 只 - GX | @ HUsersAdministr.. * 
文件 由” 尖 ( 昌 。 训 看 (V) 收 豪 关 (A 工 具 (T 大 二 (HH) 

第 4 再 

本 章 讲解 图 形 相关 知识 …… 

第 5 音 . 
本 章 讲解 列表 相关 知识 …… 
第 5 童 

本 章 讲解 列表 相关 知识 …… 


第 5 童 


图 6-11 链接 到 “第 4 章 ” 
6.3 创建 热点 区 域 


在 浏览 网 页 时 , 读者 会 发 现 ， 当 单 击 一 张 图 片 的 不 同 区 域 时 , 会 显示 不 同 的 链接 内 容 ， 这 
就 是 图 片 的 热点 区 域 。 所 谓 图 片 的 热点 区 域 就 是 将 一 个 图 片 划 分 成 若干 个 链接 区 域 。 访问 者 单 
击 不 同 的 区 域 会 链接 到 不 同 的 目标 页 面 。 

在 HTML 中 ， 可 以 为 图 片 创建 三 种 类 型 的 热点 区 域 : 和 矩形、 圆 形 和 多 边 形 。 创 建 热点 区 
域 使 用 标记 <map> 和 <area>， 语 法 格式 如 下 : 

<img src=" 图 片 地 址 " usemap="# 名 称 "> 

<map id="# 名 称 "> 

<area shape="rect" coords="10,10,100,100" href="#"> 
<area shpe="circle" cords="120,120,50" href="#"> 
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#"> 

</map> 

在 上 面 的 语法 格式 中 ， 需 要 读者 注意 以 下 几 点 。 

(1) 要 想 建立 图 片 热点 区 域 ， 必 须 先 插入 图 片 。 注 意 ， 图 片 必须 增加 usemap 属性 ， 说 
明 该 图 像 是 热点 区 域 映 射 图 像 ， 属 性 值 必须 以 “#” 开 头 ， 加 上 名 字 ， 如 “#pic”。 和 那么 上 面 
一 行 代码 可 以 修改 为 : <img src=" 图 片 地 址 " usemap="#pic">。 

(2) <map> 标 记 只 有 一 个 属性 id， 其 作用 是 为 区 域 命名 ， 其 设置 值 必须 与 <img> 标 记 的 
usemap 属性 值 相同 ， 修 改 上 述 代码 为 ，<map id="#pic">。 

(3) <area> 标 记 主 要 是 定义 热点 区 域 的 形状 及 超 链接 ， 它 有 三 个 必需 的 属性 。 


@ shape 属性 ， 控 件 划分 区 域 的 形状 ， 其 取 值 有 三 个 ， 分别 是 rect ( 纶 形 )、circle ( 圆 形 ) 
和 poly (多 边 形 )。 
@ coords 属性 ， 控 制 区 域 的 划分 坐标 。 
> 如 果 shape 属性 取 值 为 rect， 那 么 coords 的 设置 值 分 别 为 矩形 在 左上 角 x、y 坐 
标点 和 右 下 角 x、y 坐标 点 ， 单 位 为 像素 。 


是 
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> 如 果 shape 属性 取 值 为 cirle， 那 么 coords 的 设置 值 分 别 为 圆 形 的 圆心 x、y 坐标 
点 和 半径 值 ， 单 位 为 像素 。 
> 如 果 shape 属性 取 值 为 poly， 那 么 coords 的 设置 值 分 别 为 多 边 形 在 各 个 点 的 X、 
y 坐标 ， 单 位 为 像素 。 
@ href 属性 是 为 区 域 设 置 超 链接 的 目标 ， 设 置 值 为 “#"” 时 ， 表 示 为 空 链 接 。 


6.4 ”创建 浮动 框架 


HTML 5 中 已 经 不 支持 frameset 框架 , 但 是 它 仍 然 支持 iframe 浮动 框架 的 使 用 。 浮动 框架 
可 以 自由 控制 窗口 大 小 , 可 以 配合 表格 随意 地 在 网 页 中 的 任何 位 置 插入 窗口 , 实际 上 就 是 在 窗 
口中 再 创建 一 个 窗口 。 

使 用 iframe 创建 浮动 框架 的 格式 如 下 : 


<iframe src=" 链 接 对 象 "> 


其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 如 ， 
下 面 的 代码 是 在 浮动 框架 中 显示 百度 网 站 。 
【 例 6.7】〔 实 例文 件 ，ch06\6.7.html) 


<!IDOCTY?PE html> 

<html> 

<head> 

<title> 浮 动 框架 中 显示 百度 网 站 </title> 

</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 

</body> 

</html> 

在 IE 9.0 中 预览 网 页 效果 ， 如 图 6-12 所 示 。 
站 eeEol 

DS cer vo -cx| smasnssEz- > 


文件 间 将 三 日 查看 (V|。 收 齐 夫 (A) 工具 大 芭 (H) 


六 ” 天生 站 


Bai 作 百度 


网 页 点 吧 知道 MP3 图 片 没 令 


图 6-12 浮动 框架 效果 
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从 预览 结果 可 见 , 浮动 框架 在 页 面 中 又 创建 了 一 个 窗口 , 默认 情况 下 ,浮动 框架 的 宽度 和 
高 度 分 别 为 220 像素 和 120 像素 。 如 果 需 要 调整 浮动 框架 尺寸 ， 需 要 使 用 CSS 样式 ， 若 修改 
上 述 浮动 框架 尺寸 ， 要 在 head 标记 部 分 增加 如 下 CSS 代码 : 


<style> 

iframe{ 
width:600px; /宽度 
height800px; /高 度 
bordernone; /无 边框 

} 

</style> 


在 IE9.0 中 预览 网 页 效果 ， 如 图 6-13 所 示 。 


新 画 网 页 由 吧 划 道 MP3 加 点 退 要 地 民 


图 6-13 ”修改 宽度 和 高 度 的 浮动 框架 
在 HTML 5 中 ，iframe 仅 支 持 src 属性 ， 再 无 其 他 属性 。 


6.5 ”综合 实例 一 一 用 Dreamweaver 精确 定位 热点 区 域 


上 面 讲述 了 HTML 创建 热点 区 域 的 方法 ， 但 是 最 让 读者 头痛 的 地 方 ， 就 是 坐标 点 的 定位 。 
对 于 简单 的 形状 还 可 以 ,如 果 形 状 较 多 且 形 状 复杂 ,确定 坐标 点 这 项 工作 的 工程 量 就 很 大 ,， 因 
此 ， 不 建议 使 用 HTML 代码 去 完成 。 这 里 将 为 读者 介绍 一 个 快速 且 能 精确 定位 热点 区 域 的 方 
法 。 在 Dreamweaver CS5.5 中 可 以 很 方便 地 实现 这 个 功能 。 

使 用 Dreamweaver CS5.5 创建 图 片 热点 区 域 的 具体 操作 步骤 如 下 。 


OY 创建 一 个 HTML 文档 ， 插 入 一 张 图 片 文件 ， 如 图 6-14 所 示 。 
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图 6-14 插入 图 片 


9 选择 图 片 ， 在 Dreamweaver CS5.5 中 打开 “属性 ”面板 ， 面 板 左下 角 有 三 个 图 标 按钮 ， 
依次 代表 矩形 、 圆 形 和 多 边 形 热点 区 域 。 单 击 左边 的 “ 算 形 热点 ”工具 图 标 ， 如 图 6-15 所 示 。 


属性 
图 你 1SK 。 宽 名 [1001 ] 源 文 件 EJlieseesx/ot jpz |] 人 已 苦 &oO YY 类 加 [无 ~ @ 
zw ”| 商品 所 | 刍 撞 几 OD MM FP 总 
地 图 D | 委 直 人 边 虑 四 | | 。 目标 因 ww |] 寺 OA 
AN 口 ID 包 xielL 原由 ES | 


图 6-15 Dreamweaver CS5.5 中 图 像 的 “属性 ”面板 


03) 将 鼠标 指针 移动 到 被 选中 的 图 片 ， 以 “创意 信息 平台 ” 栏 中 的 矩形 大 小 为 准 ， 按 下 
鼠标 左 键 ， 从 左上 方向 右 下 方 拖 描 鼠标 ， 得 到 矩形 区 域 ， 如 图 6-16 所 示 。 


图 6-16 ”绘制 矩形 热点 区 域 
to 约 绘制 出 来 的 热点 区 域 呈 现 出 半 透 明 状态 


态 ， 效 果 如 图 6-17 所 示 。 


二 


| 
图 6-17 完成 矩形 热点 区 域 的 绘制 


tog 如 果 绘制 出 来 的 矩形 热点 区 域 有 误差 ， 可 以 通过 “属性 ”面板 中 的 “指针 热点 ” 工 
具 进 行 编辑 ， 如 图 6-18 所 示 。 


ICE | 


图 热点 链接 Q) 


目标 包 ) 
地 图 ma ] 


KN 回 DY 


图 6-18 “指针 热点 ”工具 


t@8j 完成 上 述 操作 之 后 ， 保 持 和 矩形 热点 区 域 被 选中 状态 ， 然 后 在 “属性 ”面板 的 “链接 ” 
文本 框 中 输入 该 热点 区 域 链接 对 应 的 跳 转 目标 页 面 。 


0 在 “目标 ”下 拉 列 表 框 中 有 4 个 选项 ， 它 们 决定 着 链接 页 面 的 弹出 方式 ， 这 里 如 果 
选择 了 “ blank”， 那 么 矩形 热点 区 域 的 链接 页 面 将 在 新 的 窗口 中 弹出 。 如 果 “ 目 标 ”选项 保 
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持 空白 , 就 表示 仍 在 原来 的 浏览 器 窗口 中 显示 链接 的 目标 页 面 , 这样 ， 矩形 热点 区 域 就 设置 好 
Ds 

ti@8j 接 下 来 继续 为 其 他 菜单 项 创建 矩形 热点 区 域 。 操 作 方法 请 参阅 步骤 2~ 步 骤 7， 完 成 
后 的 效果 如 图 6-19 所 示 。 


图 6-19 为 其 他 菜单 项 创建 矩形 热点 区 域 


to9j 完成 后 保存 并 预览 页 面 。 可 以 发 现 ， 凡 是 绘制 了 热点 的 区 域 ， 鼠 标 指 针 移 上 去 时 就 
会 变 成 手 形 ， 单 击 就 会 跳 转 到 相应 的 页 面 。 

加 0 到 此 ， 网 站 的 导航 就 使 用 热点 区 域 制作 完成 了 。 查 看 此 时 页 面相 应 的 HTML 源 代码 
如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 热点 区 域 </title> 

</head> 

<body> 

<img src="images/04.jpg" width="1001" height="87" border="0" usemap="#Map"> 

<map name="Map"> 
<area shape="rect" coords="298,5,414,85" href="#"> 
<area shape="rect" coords="412,4,524,85" href="#"> 
<area shape="rect" coords="525,4,636,88" href="#"> 
<area shape="rect" coords="639,6,749,86" href="#"> 
<area shape="rect" coords="749,5,864,88" href="#"> 
<area shape="rect" coords="861,6.976,86" href="#"> 

</map> 

</body> 

</html> 


可 以 看 到 ，Dreamweaver CS5.5 自动 生成 的 HTML 代码 结构 和 前 面 介绍 的 是 一 样 的 , 但 是 


所 有 的 坐标 都 自动 计算 出 来 了 , 这 正 是 网 页 制作 工具 的 快捷 之 处 。 使 用 这 些 工具 本 质 上 和 手工 
编写 HTML 代码 没有 区 别 ， 只 是 使 用 这 些 工 具 可 以 提高 工作 效率 。 


操作 ， 请 读者 自行 研究 ， 以 提高 编写 HTML 代码 效率 。 但 是 ， 请 读者 注意 ， 使 用 网 
注 意 页 制作 工具 前 ,一 定 要 明白 这 些 HTML 标记 的 作用 。 因 为 一 个 专业 的 网 页 设计 师 必 
须 具 备 HTML 方面 的 知识 ， 不 然 再 强大 的 工具 也 只 能 是 无 根 之 树 ， 无 源 之 泉 。 


人 本 书 所 讲述 的 手工 编写 HTML 代码 ， 在 Dreamweaver CS5.5 工具 中 几乎 都 有 对 应 的 


Ca a 
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读者 可 以 参照 矩形 热 区 的 操作 方法 ， 自 己 党 试 一 下 创建 圆 形 和 多 边 形 热 点 区 域 。 
6.6 问题 解答 


1. 在 创建 超 链 接 时 ， 使 用 绝对 URL 还 是 相对 URL? 
在 创建 超 链接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 需 要 使 用 完整 的 绝对 URL; 
如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 


2. 链接 增多 后 的 网 站 ， 如 何 设置 目录 结构 以 方便 维护 ? 
当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 ,网 站 的 管理 与 维护 将 变 得 非常 繁琐 , 因此 党 
握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 , 可 以 节省 很 多 时 间 。 建立 适合 的 网 站 文件 存储 结 
构 , 可 以 方便 网 站 的 管理 与 维护 。 通常 使 用 的 三 种 网 站 文件 组 织 结构 方案 及 文件 管理 遵循 的 原 
则 如 下 : 
@ 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 方 
法 适合 于 中 小 型 的 网 站 ， 这 种 方法 是 通过 文件 的 类 型 对 文件 进行 管理 的 。 
@ 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 存储 。 同 一 主题 的 所 
有 文件 存放 在 一 个 文件 夹 中 ， 然 后 再 进一步 细 分 文件 的 类 型 ， 这 种 方案 适用 于 页 面 与 
文件 数量 众多 、 信 息 量 大 的 静态 网 站 。 
@ 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 进 
一 步 细 分 后 进行 分 类 存储 管理 。 这 种 方案 适用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 多 媒 
体 动态 网 站 。 
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第 7 章 使 用 HTML5 创建 表格 


在 HTML 中 表格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布 局 。HTML 中 的 表格 类 
似 于 Word 软件 中 的 表格 ， 尤 其 是 使 用 网 页 制作 工具 ， 操 作 很 相似 。HTML 制作 表格 的 原理 是 
使 用 相关 标记 ， 如 表格 对 象 table 标记 、 行 对 象 tf、 单元 格 对 象 td 才能 完成 。 


7.1 表格 的 基本 结构 
使 用 表格 显示 数据 ， 可 以 更 直观 、 更 清晰 。 在 HTML 文档 中 ， 表 格 主要 用 于 显示 数据 ， 


虽然 可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 它 有 很 多 浆 端 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 
如 图 7-1 所 示 。 


列 
| 


单元 格 


行 一 


图 7-1 表格 的 组 成 
在 HTML 5 中 用 于 标记 表格 的 标记 如 下 。 


@ <table> 标 记 : 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 标 识 一 个 表格 对 象 的 结束 。 
一 个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 。 在 HTML 5 中 不 再 支持 它 的 任何 属性 。 

@ <tr> 标 记 : 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 
多 少 对 <tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。 在 HTML 5 中 不 再 支持 它 的 任何 属性 。 

@ <td> 标记: 用 于 标识 表格 某 行 中 的 一 个 单元 格 开始 ，</td> 标 记 用 于 标识 表格 某 行 中 的 
一 个 单元 格 结束 。<td></td> 标 记 书 写 在 <tr></tr> 标 记 内 ， 一 对 <tr></tr> 标 记 内 有 多 少 对 
<td></td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。 在 HTML 5 中 仅 有 colspan 和 rowspan 
两 个 属性 。 
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最 基本 的 表格 ， 必 须 包 含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></tr> 标 记 以 及 一 对 或 
几 对 <td></td> 标 记 。 一 对 <table></table> 标 记 定义 一 个 表格 ， 一 对 <tr></tr> 标 记 定 义 一 行 ， 一 
对 <td></td> 标 记 定 义 一 个 单元 格 ， 例 如 定义 一 个 4 行 3 列 的 表格 。 
【 例 7.1】 “实例 文件 ，ch07\7.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 表 格 基 本 结构 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td>Al</td> 
<td>B1</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 IE 9.0 中 预览 网 页 效果 ， 如 图 7-2 所 示 。 


从 预览 图 中 ， 读 者 会 发 现 ， 表 格 没有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 讲 述 上 述 知 
识 时 ， 提 到 HTML 5 中 除了 td 标记 提供 两 个 单元 格 合并 属性 之 外 ，<table> 和 <tr> 
提 示 。 标记 也 没有 任何 属性 。 
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图 7.2 表格 基本 结构 
7.2 表格 的 基本 操作 


了 解 了 表格 的 基本 结构 后 ， 下 面 来 介绍 表格 的 基本 操作 ,主要 包括 创建 表格 、 设 置 表格 的 
边框 类 型 、 设 置 表格 的 表 头 、 合 并 单元 格 等 。 


7.2.1 创建 表格 


表格 可 以 分 为 普通 表格 和 带 有 标题 的 表格 两 种 ， 可 以 在 HTML 5 中 创建 这 两 种 表格 。 
1. 创建 普通 表格 


下 面 创建 一 列 、 一 行 三 列 和 两 行 三 列 三 个 表格 。 
【 例 7.2】“《 实 例文 件 ， ch07\7.2.html) 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
<h4> 两 行 三 列 : </h4> 


HTML 5 


-body 


在 IE 9.0 中 预览 网 页 效果 ， 如 图 7-3 所 示 。 


图 7-3 程序 运行 结果 
2. 创建 带 有 标题 的 表格 


有 时 ， 为 了 方便 表述 表格 ， 还 需要 在 表格 上 面 加 上 标题 ， 例 如 创建 一 个 带 有 标题 的 表格 。 
【 例 7.3】 《实例 文件 : ch07\7.3.html) 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-4 所 示 。 


图 7-4 程序 运行 结果 
7.2.2 ”定义 表格 的 边框 类 型 
使 用 表格 的 border 属性 可 以 定义 表格 的 边框 类 型 ， 如 常见 的 加 粗 边框 表格 ， 例 如 创建 不 


同 边框 类 型 的 表格 。 
【 例 7.4】“〔 实 例文 件 ，ch07\7.4.html) 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-5 所 示 。 


图 7-5 程序 运行 结果 
7.2.3 ”定义 表格 的 表 头 


表格 当中 也 存在 有 表 头 , 常见 的 表 头 分 为 垂直 与 水 平 两 种 , 例如 分 别 创建 带 有 垂直 和 水 平 
表 头 的 表格 。 
【 例 7.5】〔 实 例文 件 ，ch07\7.5.html) 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-6 所 示 。 


图 7-6 程序 运行 结果 


7.2.4 ”设置 表格 背景 
当 创 建 好 表格 后 ， 为 了 美观 还 可 以 设置 表格 的 背景 。 


1. 定义 表格 背景 颜色 


为 表格 添加 背景 颜色 是 美化 表格 的 一 种 方式 ， 例 如 为 表格 添加 背景 颜色 。 
【 例 7.6】 实例 文件 :ch07\7.6.html) 


在 IE9.0 中 预览 网 页 的 效果 ， 如 图 7-7 所 示 。 


7-7 程序 运行 结果 


2. 定义 表格 背景 图 片 


除了 可 以 为 表格 添加 背景 颜色 外 , 还 可 以 将 图 片 设置 为 表格 的 背景 , 例如 为 表格 添加 背景 
图 片 。 
【 例 7.7】《 实 例文 件 ， ch07\7.7.html) 
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在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-8 所 示 。 


图 7-8 程序 运行 结果 
7.2.5 设置 单元 格 背景 


除了 可 以 为 表格 设置 背景 外 ， 还 可 以 为 单元 格 设置 背景 ， 例 如 为 单元 格 添加 背景 。 
【 例 7.8】 《实例 文件 :ch07\7.8.html) 
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</tr> 

<tr> 
<td background="images/1.gif*>200000</td> 
<td>300000</td> 

</tr> 

</table> 

</body> 

</html> 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-9 所 示 。 


候 了 司 HAUsersAdminist P - © X | @ Huserswmd 


文件 (站 六 强 (E) 。 王 看 (V) 收 基 关 (A) 工具 (帮助 (H) 
单元 格 背景 


W200000 
区 6oogjj300ooo 


图 7-9 程序 运行 结果 
7.2.6 合并 单元 格 
在 实际 应 用 中 , 并非 所 有 表格 都 是 规范 的 几 行 几 列 ， 而 是 需要 将 某 些 单元 格 进行 合并 ， 以 


符合 某 种 内 容 上 的 需要 。 在 HTML 中 合并 的 方向 有 两 种 ， 一 种 是 上 下 合并 ， 一 种 是 左右 合并 ， 
这 两 种 合并 方式 只 需要 使 用 td 标记 的 两 个 属性 。 


1. 用 colspan 属性 合并 左右 单元 格 
左右 单元 格 的 合并 需要 使 用 td 标记 的 colspan 属性 完成 ， 格 式 如 下 : 
<td colspan=" 数 值 "> 单 元 格 内 容 </td> 


其 中 ，colspan 属性 的 取 值 为 数值 型 整数 ， 代 表 几 个 单元 格 进行 左右 合并 。 

例如 ， 在 上 面 表 格 的 基础 上 ， 将 Al 和 B1 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 个 
<td> 标 记 增加 colspan="2" 属 性 ， 并 且 将 Bl 单元 格 的 <td> 标 记 删 除 。 

【 例 7.9】“〈 实 例文 件 ， ch07\7.9.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 单 元 格 左右 合并 </title> 
</head> 


2 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-10 所 示 。 


图 7-10 单元 格 左 右 合 并 
从 预览 图 中 可 以 看 到 ，Al 和 B1 单元 格 合并 成 了 一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 


2. 用 rowspan 属性 合并 上 下 单元 格 
上 下 单元 格 的 合并 需要 为 <td> 标 记 增加 rowspan 属性 ， 格 式 如 下 : 


其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 ， 代 表 几 个 单元 格 进行 上 下 合并 。 

例如 ， 在 上 面 表格 的 基础 上 ， 将 Al 和 A2 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 的 第 一 个 
<td> 标 记 增加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 

【 例 7.10】 《实例 文件 ，ch07\7.10.html) 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-11 所 示 。 


7-11 单元 格 上 下 合并 


从 预览 图 中 可 以 看 到 ，Al 和 A2 单元 格 合并 成 了 一 个 单元 格 。 

通过 上 面 对 左 右 单元 格 合并 和 上 下 单元 格 合并 的 操作 ， 读 者 会 发 现 ,合并 单元 格 就 是 “ 丢 
掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “ 丢 掉 ”; 对 于 上 
下 合并 ， 就 是 以 上 侧 为 准 ， 将 下 侧 要 合并 的 单元 格 “ 丢 掉 ”。 如 果 一 个 单元 格 既 要 向 右 合并 ， 
又 要 向 下 合并 ， 该 如 何 实现 呢 ? 

【 例 7.11】 实例 文件 ，ch07\7.11.html) 
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<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-12 所 示 。 


起 SG 国 HAusersAdminist 了 - C X | 和 @ 元 导 二 二 并 
文件 (站 。 六 声 E) 豆 看 (V) 。 收 项 闪 (A) 工具 Tm 帮助 (H) 


AlBI |C1 


图 7-12 两 个 方向 合并 单元 格 

从 上 面 的 代码 可 以 看 到 ，A1 单元 格 向 右 合并 B1 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 A2 
单元 格 向 右 合 并 B2 单元 格 。 

3. 使 用 Dreamweaver CS5.5 合并 单元 格 

使 用 HTML 创建 表格 非常 麻烦 ， 在 Dreamweaver CS5.5 工具 中 ， 提 供 了 表格 的 快捷 操作 ， 
类 似 于 在 Word 工具 中 编辑 表格 的 操作 。 在 Dreamweaver CS5.5 中 创建 表格 ， 只 需要 单 击 “ 插 
入 ”菜单 下 的 “表格 ”命令 ,在 出 现 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 ， 即 可 在 
光标 处 创建 一 个 空白 表格 。 选 择 表格 之 后 ， 属 性 面板 提供 了 表格 的 常用 操作 ， 如 图 7-13 所 示 。 


国 四 行 @ 宽 m| | 他 素 “ 同 | 填充 中 |” | 弄 刘 四 | 共 人 同类 @| 无 
一 ~ 列 O 间距 (8) 边 iEG@)| | 

i 国 所 5 汉 语 名 已 
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图 7-13 表格 属性 面板 


@ 将 鼠标 悬 停 于 按钮 上 ， 数 秒 之 后 会 出 现 命 令 提示 。 
注意 

关于 表格 的 操作 不 再 袭 述 ， 请 读者 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CS5.5 
合并 单元 格 。 在 Dreamweaver CS5.5 可 视 化 操作 中 ， 提 供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 
单元 格 的 操作 , 其 实 还 是 进行 的 合并 操作 。 进行 单元 格 合 并 和 拆 分 时 , 请 将 光标 置 于 单元 格 内 ， 
如 果 选 择 了 一 个 单元 格 ， 拆 分 命令 有 效 ， 如 图 7-14 所 示 。 如 果 选 择 了 两 个 或 两 个 以 上 单元 格 ， 


ES 


合并 命令 无 效 。 


图 7-14 ” 拆 分 单元 格 有 效 
7.2.7 排列 单元 格 中 的 内 容 


使 用 align 属性 可 以 排列 单元 格 内 容 ， 以 便 创建 一 个 美观 的 表格 。 
【 例 7.12】 《实例 文件 ，ch07\7.12.html) 


HTML 5 


在 IE 9.0 中 预览 网 页 的 效果 ， 如 图 7-15 所 示 。 


renin POX] Brueninier. *| 
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7-15 
7.2.8 设置 单元 格 的 行 高 与 列 宽 


使 用 Cell padding 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 ， 从 而 调整 表格 的 行 高 与 列 宽 。 
【 例 7.13】〔 实 例文 件 ，ch07\7.13.html) 
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</tr> 

<tr> 
<td>2000</td> 
<td>3000</td> 

</tr> 

</table> 

</body> 

</html> 


在 IE9.0 中 预览 网 页 的 效果 ， 如 图 7-16 所 示 。 


ln] 
rs Administ PD ~ © X | @ HUsersAdministr 
ET 全 看 看 (V) 区 期 详 ( 和 工具 (T) 天 彻 (H) 


图 7-16 程序 运行 结果 


7.3 完整 的 表格 标记 


上 面 讲述 了 表格 中 最 常 Ra <tr> 和 <td>， 使 用 它们 可 以 构建 
出 最 简单 的 表格 。 为 了 让 ei 构 更 清楚 ， 配 合 后 面 学 习 的 CSS 样式 ， 可 更 方便 地 制作 各 种 
表格 ， 还 会 出 现 表 头 、 主 体 、 脚 注 等 。 

按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 行 组 
分 为 三 类 一 一 “ 表 头 ”、“ 主 体 ” 和 “脚注 ”。 三 者 相应 的 HTML 标记 依次 为 <thead>、<tbody> 
和 <tfoot>。 

此 外 ,在 表格 中 还 有 两 个 标记 。 标 记 <caption> 表 示 表 格 的 标题 。 在 一 行 中 ， 除 了 <td> 标 记 
表示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 表 示 该 单元 格 是 这 一 行 的 “行头 ” 

【 例 7.14】〔 实 例文 件 : ch07\7.14.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 完 整 表格 标记 </title> 

<style> 

tfoot{ 
background-color:#FF3; 


从 上 面 的 代码 中 可 以 发 现 , 使 用 caption 表格 定义 了 表格 标题 ,<thead>、<tbody> 和 <tfoot> 
标记 对 表格 进行 了 分 组 。 在 <thead> 部 分 使 用 <th> 标 记 代替 <td> 标 记 定 义 单元 格 ，<th> 标 记 定 
义 的 单元 格 默认 加 粗 ， 网 页 预览 的 效果 如 图 7-17 所 示 。 


图 7-17 完整 的 表格 结构 
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【分 <caption> 标 签 必须 紧 随 <table> 标 签 之 后 。 


注 意 


7.4 综合 实例 一 一 制作 计算 机 报价 表 


利用 所 学 的 表格 知识 ， 制 作 如 图 7-18 所 示 的 计算 机 报价 表 。 


型 号 类 型 价格 图 片 


宏 攻 (Acen) AS4552-P352G32MHNCC 笔记 本 于 2799 SS 
~ 7 
融 尔 el) 14VE-188 鞋 记 本 ¥249 本 ‘sh 
联 良 (Lenovwo) G470AH2310W42G500P7CW30DB)-CN 笔记 本 丫 4149 多 
战 尔 家 用 (DELL) I560SR-655 后 式 |¥3599| La 


宕 图 奇 及 (Hiteker) BS-5503-TF 白 式 |¥3599| 


联想 (Lenove) GT0 比 记 本 丫 4299| J | 


图 7-18 计算 机 报价 表 
具体 操作 步骤 如 下 。 
和 新 建 HTML 文档 ， 并 对 其 简化 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title> 完 整 表格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


to3 保存 HTML 文件 ， 选 择 相应 的 保存 位 置 ， 文 件 名 为 


“综合 示例 


购物 简易 计算 
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器 .html”。 
i03j 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 : 


<table> 
<caption> 计 算 机 报价 单 </caption> 
<tr> 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</tr> 
<tr> 
<td> 宏 基 (Acer) AS4552-P362G32MNCC</td> 
<td> 笔 记 本 </td> 
<td>¥2799</td> 
<td><img src="images/Acer.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 戴 尔 (Dell) 14VR-188</td><td> 笔 记 本 </td> 
<td>¥3499</td> 
<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3(DB)-CN </td> 
<td> 笔 记 本 </td> 
<td>¥4149</td> 
<td><img src="images/Lenovo.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 戴 尔 家 用 (DELL) 1560SR-656</td> 
<td> 台 式 </td> 
<td>¥3599</td> 
<td><img src="images/DellT.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 宏 图 奇 眩 (Hiteker) HS-5508-TF</td> 
<td> 台 式 </td> 
<td>¥3399</td> 
<td><img src="images/Hiteker.jpg" width="120" height="120"></td> 
</tr> 
<tr> 
<td> 联 想 (Lenovo) G470</td> 
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<td> 笔 记 本 </td> 
<td>¥4299</td> 
<td><img src="images/LenovoG.jpg" width="120" height="120"></td> 
</tr> 
</table> 


C7 利用 caption 标记 制作 表格 的 标题 ，<th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 片 
注 放 在 单元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 


意 
0 和 在 HTML 文档 的 head 部 分 增加 CSS 样式 ， 为 表格 增加 边框 及 相应 的 修饰 ， 代 码 如 
下 : 


/# 表 格 增加 线 宽 为 3 的 橙色 实 线 边框 */ 
border:3px solid #F60; 

} 

caption{ 
表格 标题 字号 36*/ 
font-size:36px; 

上 

th,tdf 
/# 表 格 单元 格 〈th、td) 增加 边线 所 
border:1px solid #F90; 

} 


</style> 
I05) 保存 网 页 后 ， 即 可 查看 最 终 效 果 . 


7.5 问题 解答 


1. 在 Dreamweaver CS5.5 中 如 何 选择 多 个 单元 格 ? 

在 Dreamweaver CS5.5 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word， 按 下 鼠标 左 键 拖 
动 鼠 标 ， 经 过 的 单元 格 都 会 被 选择 。 按 下 Ctrl 键 ， 单 击 某 个 单元 格 ， 该 单元 格 将 会 被 选择 ， 
这 些 单元 格 可 以 是 连续 的 ， 也 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 击 ， 按 下 
Shift 键 ， 在 区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单元 格 将 会 被 
选择 。 

2. 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 呢 ? 

在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 非常 单调 ， 当 时 美国 设计 David Siegel 
发 明了 表格 布局 ， 并 风靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 控制 页 面 
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的 外 观 及 显示 位 置 ， 导致 页 面 代码 过 多 ,结构 与 内 容 无 法 分 离 , 给 网 站 的 后 期 维护 和 很 多 其 他 
方面 带 来 了 麻烦 。 

3. 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 

在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoof> 标 记 虽 然 从 外 观 上 不 能 看 出 任何 变化 ， 
但 是 它们 却 使 文档 的 结构 更 加 清晰 。 使 用 <thead>、<tbody> 和 <tfoof> 标 记 除了 使 文档 更 加 清晰 
之 外 ， 还 有 一 个 更 重要 的 意义 ， 即 方便 使 用 CSS 样式 对 表格 的 各 个 部 分 进行 修饰 ， 从 而 可 制 
作出 更 出 色 的 表格 。 


“144. 


第 8 章 使 用 HTML 5 创建 表单 


在 网 页 中 ， 表 单 的 作用 比较 重要 ， 主 要 负责 采集 浏览 者 的 相关 数据 ， 例 如 常见 的 注册 表 、 
调查 表 和 留言 表 等 。 在 HTML 5 中 ， 表 单 拥有 多 个 新 的 表单 输入 类 型 ， 这 些 新 特性 提供 了 更 
好 的 输入 控制 和 验证 。 


8.1 表单 概述 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 ， 其 标签 为 <form></form>。 表 单 的 基本 语法 
格式 如 下 : 


<form action="url" method="getlpost" enctype="mine"> 


</form > 


其 中 ，action="url" 指定 处 理 提交 表单 的 格式 ， 可 以 是 URL 地 址 或 电子 邮件 地 址 。 
method="get/post" 指 明 提交 表单 的 HTTP 方法 。enctype=mine 指明 用 来 把 表单 提交 给 服务 器 时 
的 互联 网 媒体 形式 。 

表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 

【 例 8.1】〔 实 例文 件 ，ch08\8.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name= "user"> 
<br> 

用 户 密码 

<input type="password" name="password"> 
<br> 

<input type="submit" value=" 登 录 "> 
</form> 

</body> 

</html> 
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在 昔 9.0 中 的 浏览 效果 如 图 8-1 所 示 ， 可 以 看 到 用 户 登 录 信息 页 面 。 
Ts 


A ~ pr 
[RCs 2 和 fchos\s.lhiml P+ CxX| EE 
文件 (月 ” 注 独 ( 。 下 看 (V) 效 写 闪 (A) 工具 Tm) ” 


下 面 是 输入 用 户 登 录 信息 
用 户 名 称 


用 户 密码 
[到 


图 8-1 用 户 登录 窗口 


8.2 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 密 码 框 、 下 拉 菜 单 、 
单 选 框 和 复 选 框 等 。 


8.2.1 单行 文本 输入 框 


文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 例 如 用 户 姓 名 和 地 址 等 。 代 码 格式 如 下 : 


<input type="text" name="..." size="..." maxlength="..." value="..."> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采集 ， 必 须 定义 一 个 独一无二 的 名 称 ，size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; 
maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 

【 例 8.2】 《实例 文件 :ch08\8.2.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 的 姓名 </title></head> 

<body> 

<form> 

请 输入 您 的 姓名 : 

<input type="text" name="yourname" size="20" maxlength="15"> 
请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-2 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 


使 用 HTML 5 创建 表单 ”第 8 章 


FE 区 
Ca 全 代 于 \cho8\8.2htm| PP- CX | 晨 


文件 (有 )” 闫 活 (E) 要 看 (V)】 。 收 项 交 (A) 工具 mm ” 


请 输入 您 的 姓名 ， 


请 输入 您 的 地 址 ， 


图 8-2 单行 文本 输入 框 
8.2.2 多 行文 本 输入 框 


多 行 输入 框 〈textarea) 主要 用 于 输入 较 长 的 文本 信息 。 代 码 格 式 如 下 : 
<textarea name="..." cols="..." rOWs="..." Wrap="..."></textarea > 


其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 
二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 多 行文 本 
框 的 高 度 ， 单 位 是 单个 字符 宽度 ;wrap 属性 定义 输入 内 容 大 于 文本 域 时 的 显示 方式 。 

【 例 8.3】 “实例 文件 ，ch08\8.3.html) 


<!DOCTYPE html> 

<html> 

<head><title> 多 行文 本 输入 </title></head> 

<body> 

<form> 

请 输入 您 最 新 的 工作 情况 <br> 

<textarea name="yourworks" cols ="50" rows = "$5"></textarea> 
<br> 

<input type="submit" value=" 提 交 "> 

</form> 


</body> 
</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-3 所 示 ， 可 以 看 到 多 行文 本 输入 框 。 


和 Re 国人 可 chos\83html 站- GX | 居多 行文 <+ 征 入 


文件 站 痢 短 日 得 碍 M)。 收 宣 关 内 工具。 帮 动 H) 
请 输入 您 最 新 的 工作 情况 


图 8-3 多 行文 本 输入 框 
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8.2.3 ”密码 域 
密码 输入 框 是 一 种 特殊 的 文本 域 , 主要 用 于 输入 保密 信息 。 当 网 页 浏览 者 输入 文本 时 ， 显 


<input type="password" name="..." size="..." maxlength="..."> 
其 中 type="password" 定 义 密码 框 ，name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 ，size 属 


性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 8.4】〈 实 例文 件 : ch08\8.4.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓 名 和 密码 </title></head> 
<body> 

<form> 

用 户 姓名 : 

<input type="text" name="yourname"> 

<br> 

登录 密码 : 

<input type="password" name="yourpw"><br> 
</form> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-4 所 示 , 输入 用 户 名 和 密码 时 可 以 看 到 密码 以 黑 点 形式 显示 。 


Ee 到 
FN 
(二 内 achonsahm P - ox | 关 过 入 及 产生 和 这 本 


文件 (月 ”六 强 (E) 。 豆 看 (V) ”站 菁 闪 (A) 工具 (T) 帮助 (H) 


用 户 姓名 tyy 
登录 密码 ， ee 


图 8-4 密码 输入 框 
8.2.4 ” 单 选 按钮 
单 选 按 钮 主要 是 控制 网 页 浏览 者 在 一 组 选项 里 只 能 选择 一 个 选项 。 代 码 格式 如 下 : 


<input type="radio" name=" " value =" "> 


使 用 HTML 5 创建 表单 ”第 8 章 


其 中 type="radio" 定 义 单 选 按钮 ; name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 单 
位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ; value 属性 定义 单 选 按钮 的 值 ， 在 同一 
组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 

【 例 8.5】“〈 实 例文 件 ，ch08\8.5.html) 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 <title></head> 

<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 : 

<br> 

<input type="radio" name="book" value = "Book1"> 网 站 编程 <br> 
<input type="radio" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value = "Book3"> 设 计 软 件 <br> 
<input type="radio" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value = "Book5"> 黑客 攻防 <br> 
</form> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-5 所 示 ， 即 可 看 到 5 个 单 选 按钮 ， 用 户 只 能 选择 其 中 一 个 单 
选 按钮 。 


| 
> 
(SI le] 代码 \ch08\8.5.html DD ”CX | 若 运 尖 县 ;< 辣 的 图 书 


文件 (日 。 演 器 (E) 各 看 (V) 收藏 突 (A) 工具 (T) 帮助 (H) 
请 选择 您 感 兴趣 的 图 书 类 型 ， 

) 网 站 编程 

办 公 软 件 

司 设计 软件 

) 网 络 管理 


图 8-5 单 选 按 钮 
8.2.5” 复 选 框 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 ,每 个 复 选 框 都 是 一 个 独 
立 的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 代 码 格式 如 下 : 


<input type="checkbox" name=" " value =""> 
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其 中 type="checkbox" 定 义 复 选 框 ，name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
必须 用 同一 个 名 称 ，value 属性 定义 复 选 框 的 值 。 
【 例 8.6】“〔 实 例文 件 :， ch08\8.6.html) 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form > 

请 选择 您 感 兴趣 的 图 书 类 型 ， <br> 

<input type="checkbox" name="book" value = "Bookl"> 网 站 编程 <br> 
<input type="checkbox" name="book" value = "Book2"> 办 公 软 件 <br> 
<input type="checkbox" name="book" value = "Book3"> 设 计 软件 <br> 
<input type="checkbox" name="book" value = "Book4"> 网 络 管理 <br> 
<input type="checkbox" name="book" value = "Book5" checked> 黑 客 攻防 <br> 
</form> 

</body> 

</html> 


checked 属性 主要 用 来 设置 默认 选中 选项 。 
提 示 
在 IE 9.0 中 的 浏览 效果 如 图 8-6 所 示 ， 可 看 到 有 5 个 复 选 框 ， 其 中 “黑客 攻防 ” 复 选 框 默 
认 被 选中 。 


CN 一 
Ri 皮 ] 代码 \ch08\8,6.html 人 ”CC X | 大 运 近 大兴 十 的 盏 书 


文件 (月 ” 妨 强 (E) 到 看 V) 效 芝 交 (A) ”工具 (T) 帮助 (H) 


请 选择 您 感 兴趣 的 图 书 类 型 
| 网 站 编程 


局 


图 8-6 复 选 框 的 效果 
8.2.6 下 拉 选 择 框 


下 拉 选 择 框 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 下 拉 选 择 框 既 可 以 用 做 单 选 , 也 可 以 
做 复 选 。 代 码 格式 如 下 : 


其 中 size 属性 定义 下 拉 选 择 框 的 行 数 ，name 属性 定义 下 拉 选 择 框 的 名 称 ; multiple 属性 
表示 可 以 多 选 ， 如 果 不 设 置 本 属性 ， 那 么 只 能 单 选 ; value 属性 定义 选择 项 的 值 ，selected 属性 
表示 默认 已 经 选择 本 选项 。 

【 例 8.7】 “实例 文件 :ch08\8.7.html) 


在 IE 9.0 中 的 浏览 效果 如 图 8-7 所 示 ， 可 以 看 到 下 拉 选 择 框 ， 其 中 显示 为 三 行 选 项 ,用 户 
可 以 按 住 Ctrl 键 ， 选 择 多 个 选项 。 


图 8-7 下 拉 选 择 框 的 效果 
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8.2.7 ”普通 按钮 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚 本 的 处 理工 作 。 代 码 格式 如 下 : 
<input type="button" name="..." value="..." onClick="..."> 


其 中 type="button" 定 义 普通 按钮 : name 属性 定义 普通 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 ; onClick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 的 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 
的 行为 。 

【 例 8.8】“〔 实 例文 件 : ch08\8.8.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 拷 贝 到 文本 框 2 中 : 

<br 记 > 

文本 框 1:<input type="text" id="field1" value=" 学 习 HTML 5 的 技巧 "> 

<br 记 

文本 框 2:<input type="text" id="field2"> 

<br> 

<input type="button” name="..."” value=" 单 击 我 ” onClick="document.getElementByld('field2').value= 
document.getElementByld('field1").value"> 

</form> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-8 所 示 ， 单 击 “ 单 击 我 ”按钮 ， 即 可 实现 将 文本 框 中 内 容 复 
制 到 文本 框 2 中 。 


， EE 
gy) | C\Usersyingda\C PD- CX 
文件 (月 ”篇 锡 (E) ”前 看 (V) ”收藏 夫 (A) 工具 (T ” 
单 击 下 面 的 按钮 ， 把 文本 框 1 的 内 
容 拷贝 到 文本 框 2 中 ， 
文本 框 1 : 学 习 HTIL5 的 技巧 
文本 框 2: 学 习 HTIL5 的 技巧 


A 


图 8-8 单 击 按钮 后 的 复制 效果 


8.2.8 提交 按钮 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 代 码 格式 如 下 : 
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<input type="submit" name="..." value="..."> 
其 中 type="submit" 定 义 提交 按钮 ; name 属性 定义 提交 按钮 的 名 称 ; value 属性 定义 按钮 的 
显示 文字 。 通 过 提交 按钮 可 以 将 表单 里 的 信息 提交 给 表单 中 action 所 指向 的 文件 。 
【 例 8.9】 实 例文 件 ，ch08\8.9.html) 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 名 信息 </title></head> 
<body> 

<form action="http:/www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 

<input type="text" name="yourname"> 
<br> 

请 输入 你 的 住址 : 

<input type="text" name="youradr"> 
<br> 

请 输入 你 的 单位 : 

<input type="text" name="yourcom"> 
<br> 

请 输入 你 的 联系 方式 : 

<input type="text" name="yourcom"> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 IE9.0 中 的 浏览 效果 如 图 8-9 所 示 ， 输 入 内 容 后 单 击 “ 提 交 ” 按 钮 ， 即 可 实现 将 表单 中 
的 数据 发 送 到 制定 的 文件 。 


-oe En 
WN es 
区 SL»] EC\Usersyingda\C PD ~- OX | 感 输入 用 户 名 作 
文件 (月 ” 编 铝 (E) ”查看 (V) 收藏 夫 (A) ”工具 (T) ”帮助 (H) 


请 输入 你 的 姓名 ， | 
请 输入 你 的 住址 : 

请 输入 你 的 单位 ， 

请 输入 你 的 联系 方式 : 


图 8-9 提交 按钮 
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8.2.9 重 置 按钮 
重 置 按钮 用 来 重 置 表单 中 输入 的 


<input type="reset" name="..." value="... 


其 中 type= 
显示 文字 。 


reset" 定 义 复位 按钮 ; 


【 例 8.10】〔 实 例文 件 ，ch08\8. 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

请 输入 用 户 名 称 : 

<input type='text> 

<br> 

请 输入 用 户 密码 : 

<input type='password'> 

<br> 

<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 

</body> 

</html> 


信息 。 代 码 格式 如 下 : 


name 属性 定义 复位 按钮 的 名 称 ，value 属性 定义 按钮 的 


10.html) 


在 IE 9.0 中 的 浏览 效果 如 图 8-10 所 示 ， 输 入 内 容 后 单 击 “ 重 置 ”按钮 ， 即 可 实现 将 表单 


中 的 数据 清空 的 目的 。 


( 


图 8-10 


8.3 


除了 上 述 基 本 元 素 外 , HTML 5 


IEE) csersyingda\c P ~ 
| 


文件 (月 ” 连 纺 ( 
请 输入 用 户 名 称 ， 

| 

请 输入 用 户 密码 : 


EL 


气 


可 看 (V) 收藏 夫 (, ” 


“ 重 置 ”按钮 


表单 高 级 元 素 的 使 用 


bh 还 有 一 些 高 级 元 素 , 包括 url、 email、 time、 range、 search 
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等 。 对 于 这 些 高 级 属性 ，IE 9.0 浏览 器 暂时 还 不 支持 ， 下 面 将 用 Opera 11.60 浏览 器 查看 效果 。 
8.3.1 url 属 性 


url 属 性 用 于 说 明 网 站 网 址 的 , 显示 为 一 个 文本 字段 , 用 于 输入 URL 地 址 。 在 提交 表单 时 ， 
会 自动 验证 url 的 值 。 代 码 格式 如 下 : 


<input type="url" name="userurl"/> 

另外 ， 用 户 可 以 使 用 普通 属性 设置 url 输入 框 ， 例 如 可 以 使 用 max 属性 设置 其 最 大 值 、 
min 属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 、 利 用 value 属性 规定 其 默认 值 。 对 于 
另外 的 高 级 属性 中 同样 的 设置 不 再 重复 讲述 。 

【 例 8.11】 《实例 文件 ，ch08\8.11.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br> 

请 输入 网 址 : 

<inputtype="url" name="userurl"/> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 的 浏览 效果 如 图 8-11 所 示 ， 用 户 可 输入 相应 的 网 址 。 


t+O~ 


请 输入 网 址 : 


图 8-11 url 属性 的 效果 


8.3.2 email 属 性 


与 url 属性 类 似 ，email 属性 用 于 输入 e-mail 地 址 。 在 提交 表单 时 ， 会 自动 验证 email 域 
的 值 。 代 码 格式 如 下 : 


<input type="email" name="user_email"/> 
【 例 8.12】〔 实 例文 件 : ch08\8.12.html) 


<!DOCTYPE html> 
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<html> 

<body> 

<form> 

<br> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br> 

<input type="submit" value=" 提 交 "> 
</form> 

</body> 

</html> 


在 Opera 11.60 中 的 浏览 效果 如 图 8-12 所 示 ， 用 户 可 输入 相应 的 邮箱 地 址 。 如 果 用 户 输入 
的 邮箱 地 址 不 合法 ， 单 击 “ 提 交 ” 按 钮 后 会 弹出 图 8-12 中 的 提示 信息 。 
Opera ET E 


| MW fiey//ocalhosyCyUs.. x | 百 


所 字 四 or | 时 本 好 | localho 


请 输入 您 的 邮箱 地 址 ， I 
EE 请 答 入 一 个 有 效 的 电子 邮件 地 址 


图 8-12 ”eamil 属性 的 效果 
8.3.3 date 和 time 属性 


在 HTML 5 中 ,新 增 了 日 期 和 时 间 输 入 类 型 ， 包 括 date、datetime 、datetime-local、month、 
week 和 time。 它 们 的 具体 含义 如 表 8-1 所 示 。 


表 8-1 新 增 日 期 和 时 间 属 性 


date 选取 日 、 月 、 年 

month 选取 月 、 年 

week 选取 周 和 年 

time 选取 时 间 

datetime 选取 时 间 、 日 、 月 、 年 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 》 


上 述 属 性 的 代码 格式 类 似 ， 例 如 以 date 属性 为 例 ， 代 码 格式 如 下 : 


<input type="date" name="user date" /> 


【 例 8.13】 实例 文件 ，ch08\8.13.html) 


在 Opera 11.6 中 的 浏览 效果 如 图 8-13 所 示 ， 用 户 单 击 输入 框 中 的 向 下 按钮 ， 即 可 在 弹出 
的 窗口 中 选择 需要 的 日 期 。 


My 
EEE 


i 


8-13 date 属性 的 效果 
8.3.4 number 属性 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数字 或 者 通过 单 击 微调 
框 中 的 向 上 或 者 向 下 按钮 选择 数字 。 代 码 格式 如 下 : 


【 例 8.14】〔 实 例文 件 ，ch08\8.14.html) 
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<input type="number" name="shuzi "/> 次 了 哦 ! 
</form> 
</body> 
</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-14 所 示 ， 用 户 可 以 直接 输入 数字 ， 也 可 以 单 击 微 调 按 
钮 选择 合适 的 数字 。 


八大 Opera 
| fle//ocalhosycyUs.. x [es 
4 > 个 o | 时 本 好 | localho 妆 | 


此 网 站 我 曾经 来 引 守 次 了 哦 ! 


图 8-14 number 属性 的 效果 


【 强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 
提 示 
8.3.5 range 属性 


range 属性 用 来 显示 滚动 的 控件 。 和 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 step 
属性 控制 控件 的 范围 。 代 码 格式 如 下 : 
<input type="range" name="" min="" max="" 


其 中 min 和 max 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 
【 例 8.15】 《实例 文件 ，ch08\8.1S.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

<br> 

英语 成 绩 公 布 了 ! 我 的 成 绩 名 次 为 : 

<input type="range" name="ran" min="1" max="10" /> 
</form> 

</body> 

</html> 
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在 Opera 11.6 中 的 浏览 效果 如 图 8-15 所 示 ， 用 户 可 以 拖 电 滑 块 ， 从 而 选择 合适 的 数字 。 


sc 区 司 
[Miie//oc.. x | Wiie/noc.. x | 去 面 
所 省 全 or | 图 本 地 | localho 疤 


英语 成 绩 公 布 了 ! 我 的 成 绩 名 次 为 ， 


图 8-15 range 属性 的 效果 


C07} 默认 情况 下 ， 滑 块 位 于 滚珠 的 中 间 位 置 。 如 果 用 户 指 定 的 最 大 值 小 于 最 小 值 ， 则 
提示 允许 使 用 反 向 滚动 轴 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 
人 狼 \ 


8.3.6 required 属性 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 〈 不 能 为 空 ) 。required 属性 适用 于 以 下 类 
型 的 输入 属性 : text、search、url、email、password、date、pickers、number、checkbox 和 radio 
【 例 8.16】 实例 文件 ，ch08\8.16.html) 


<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登录 信息 

<br> 

用 户 名 称 

<input type="text" name="user" required="required"> 
<br> 

用 户 密码 

<input type="password" name="password" required="required"> 
<br> 

<input type="submit" value=" 登 录 "> 

</form> 

</body> 

</html> 


在 Opera 11.6 中 的 浏览 效果 如 图 8-16 所 示 ， 用 户 如 果 只 是 输入 密码 ， 然 后 单 击 “ 登 录 ” 
按钮 ， 将 弹出 提醒 信息 。 
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[LEE 三 于 加 
及 fies//localhosy/C/Us... x eS im| 
生字 加 or | 时 本 地 |localho 太 
各 息 -日 Ri 保存 | 从 不 x 让 
下 面 是 输入 用 户 登 录 信息 
用 下 多 1 加 
用 户 密 友 | 必须 填写 上 
EE 三 GSS 
品 eu 


图 8-16 ”required 属性 的 效果 


8.4 综合 实例 一 一 创建 用 户 反馈 表单 


在 本 实例 中 ， 将 使 用 表单 内 的 各 种 元 素来 开发 一 个 简单 网 站 的 用 户 意见 反馈 页 面 。 

反馈 表单 非常 简单 , 通常 包含 三 个 部 分 , 需要 在 页 面 上 方 给 出 标题 , 标题 下 方 是 正文 部 分 ， 
即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 
成 HI 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 

首先 构建 HTML 页 面 ， 实 现 表单 内 容 : 


<!DOCTYPE html> 


<html> 

<head> 

<title> 用 户 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反馈 表单 </h1> 
<form method="post" > 

<p> 姓 &nbsp;&nbsp;&nbsp;&nbsp; 名 : 
<input type="text" class=txt size="12" maxlength="20" name="username" /> 
</p><p> 性 &nbsp;&nbsp;&nbsp;&nbsp; 别 : 
<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 
</p><p> 年 &nbsp;&nbsp;&nbsp;&nbsp; 龄 : 
<input type="text" class=txt name="age” /> 
<p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel" /> 
</p><p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 

<input type="text" class=txtname="address" 亡 
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<p> 

<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 

<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset" value=" 清 除 " /> 
</p> 

</form> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 8-17 所 示 ， 可 以 看 到 创建 了 一 个 用 户 反馈 表单 ， 包 含 一 个 标 
题 “用户 反馈 表单 ”及 “姓名 ”、 “年 龄 ”、“ 联 系 电话 ”、“ 电 子 邮件 ”、“ 联 系 地 址 ”、 
“请 输入 您 对 网 站 的 建议 ”等 输入 框 、“ 性 别 ” 单 选 按钮 和 “提交 ”按钮 。 


EE 


联系 地 址 
请 输入 您 寻 网 站 的 建议 


CalE 


图 8-17 用 户 反 馈 页 面 
8.5 问题 解答 


1. 如 何在 表单 中 实现 文件 上 传 文本 框 ? 

在 HTML 5 语言 中 ， 使 用 file 属性 实现 文件 上 传 文本 框 。 语 法 格式 为 : <input type="file" 
name="..." size=" " maxlength=" ">。 其 中 type="file" 定 义 为 文件 上 传 框 ，name 属性 为 文件 上 传 
文本 框 的 名 称 ，size 属性 定义 文件 上 传 文本 框 的 宽度 ， 单 位 是 单个 字符 宽度 maxlength 属性 
定义 最 多 输入 的 字符 数 ， 文 件 上 传 框 的 显示 效果 如 图 8-18 所 示 。 
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en 


[eel 司 CNusersyingda\C 只 - OX | 寿 CNuserswinedi 


图 8-18 文件 上 传 框 


2. 制作 的 单 选 框 为 什么 可 以 同时 选中 多 个 ? 
此 时 用 户 需 要 检查 单 选 框 的 名 称 , 保证 同一 组 中 的 单 选 框 名 称 必须 相同 , 这 样 才 能 保证 单 
选 框 上 只 能 选中 一 个 。 


ED 


第 9 章 使 用 HTML 5 绘制 图 形 


HTML 5 呈现 了 很 多 的 新 特性 ， 这 在 之 前 的 HTML 中 是 不 可 能 见 到 的 。 其 中 一 个 最 值得 
提 及 的 特性 就 是 HTML Canvas， 可 以 对 2D 或 位 图 进行 动态 、 脚 本 的 泻 染 。Canvas 是 一 个 矩 
形 区 域 ， 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 


9.1 canvas 概述 
canvas 是 一 个 新 的 HTML 元 素 ， 这 个 元 素 可 以 被 Script 语言 (通常 是 JavaScript) 用 来 绘 
制图 形 。 例 如 可 以 用 它 来 画图 、 合 成 图 像 或 做 简单 的 动画 。 
9.1.1 添加 canvas 元 素 


canvas 标签 是 一 个 矩形 区 域 , 它 包含 两 个 属性 width 和 height, 分 别 表示 和 矩形 区 域 的 宽度 和 高 


度 ， 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300 像素 和 150 像素 。 


<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


上 面 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 ; 最 初 的 画 
布 是 不 可 见 的 ， 为 了 观察 这 个 矩形 区 域 ， 这 里 使 用 了 CSS 样式 ， 即 style 标记 。style 表示 画布 
的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 会 显示 画布 中 间 的 提示 信息 。 

画布 canvas 本 身 不 具有 绘制 图 形 的 功能 , 只 是 一 个 容器 , 如 果 读 者 对 Java 语言 非常 了 解 ， 
就 会 发 现 HTML 5 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 内 绘制 图 形 。 既 然 
放 好 了 canvas 画布 元 素 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 像 了 。 

使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 情 况 下 需要 下 面 几 个 步骤 


td JavaScript 使 用 id 来 寻找 canvas 元 素 ， 即 可 获取 当前 画布 对 象 ， 其 代码 如 下 : 


Var c=document.getElementById("myCanvas"); 
W022 创建 context 对 象 ， 其 代码 如 下 : 
Var Cxt=c.getContext("2d"); 


getContext 方法 返回 一 个 指定 contextId 的 上 下 文 对 象 ， 如 果 指 定 的 id 不 被 支持 ， 则 返回 
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null， 当 前 唯一 被 强制 必须 支持 的 是 24， 也 许 在 将 来 会 有 3d， 注 意 ， 指 定 的 id 是 大 小 写 敏感 
的 。 对 象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 算 形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 
I03| 绘制 图 形 : 


cxt.fillStyle="#FF0000"; 
cxt.fillRect(0,0,150,75); 


fillStyle 方法 将 其 染 成 红色 ，fillRect 方法 规定 了 形状 、 位 置 和 尺寸 。 这 两 行 代码 将 绘制 
一 个 红色 的 矩形 。 


9.1.2 ”绘制 矩形 


单独 的 一 个 canvas 标记 只 是 在 页 面 中 定义 了 一 块 矩形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 
有 配合 使 用 JavaScript 脚本 ， 才 能 够 完成 各 种 图 形 、 线 条 ， 以 及 复杂 的 图 形变 换 操 作 ， 与 基于 
SVG 来 实现 同样 绘图 效果 比较 , canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 , 而 SVG 则 是 一 
种 矢量 绘图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形 ， 可 能 会 涉及 一 个 或 多 个 方法 ， 这 些 方法 如 表 9-1 
所 示 。 

表 9-1 绘制 矩形 时 涉及 的 方法 
EE EC 
绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 方法 有 4 个 参数 ， 前 两 个 表示 


fillRect i 
左上 角 的 坐标 位 置 ， 第 三 个 参数 为 长 度 ， 第 四 个 参数 为 高 度 


绘制 一 个 带 边框 的 矩形 。 该 方法 的 4 个 参数 的 解释 同 fillRect 方法 
清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 方法 的 4 个 参数 的 解释 同 fillRect 
Clearkec 

方法 。 


【 例 9.1】“《 实 例文 件 : ch09\9.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

Var c=document.getElementById("myCanvas"); 
Var cxt=c.getContext("2d"); 
cxt.fillStyle="rgb(0,0,200)"; 
cxt.fillRect(10,20,100,100); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 首 先 定义 画布 对 象 ， 其 id 名 称 为 myCanvas， 其 高 度 和 宽度 都 为 500 像素 ， 
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并 定义 了 画布 边框 显示 样式 。 
在 JavaScript 代码 中 ， 首 先 获取 画布 对 象 ， 然 后 使 用 getContext 获取 当前 2d 的 上 下 文 对 
象 ， 并 使 用 fillRect 绘制 矩形 。 其 中 涉及 filstyle 属性 ，fillstyle 用 于 设 定 填 充 的 颜色 、 透 明度 
等 ， 如 果 设 置 为 rgb 〈200,0.0) ， 则 表示 颜色 ， 不 透明 ; 如 果 设 为 rgb (0,200,0.5) ， 也 表示 为 
颜色 ， 透 明度 为 50%。 
在 正 9.0 中 浏览 效果 如 图 9-1 所 示 ， 可 以 看 到 网 页 中 ， 在 蓝 色 边 框 中 显示 了 一 个 蓝 色 和 矩形 。 


[ll 
<) 关 FA 素 文 伯 \echi 和 17.Lhtml 岂 - 上 X | 车 = 本 广 cl7V7.Lhuml 0 


图 9-1 绘制 矩形 
9.2 绘制 基本 形状 


画布 canvas 结合 JavaScript 不 但 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 
例如 直线 、 圆 等 。 


9.2.1 绘制 圆 形 


基于 canvas 的 绘图 并 不 是 直接 在 canvas 标记 所 创建 的 绘图 画面 上 进行 各 种 绘图 操作 ， 而 
是 依赖 画面 所 提供 的 泻 染 上 下 文 (Rendering Context) 来 操作 的 ， 所 有 的 绘图 命令 和 属性 都 定 
义 在 泻 染 上 下 文 当中 。 在 通过 canvas id 获取 相应 的 DOM 对 象 之 后 首先 要 做 的 事情 就 是 获取 
泻 染 上 下 文 对 象 。 泻 染 上 下 文 与 canvas 一 一 对 应 ,无 论 对 同一 canvas 对 象 调用 几 次 getContext() 
方法 ， 都 将 返回 同一 个 上 下 文 对 象 。 

在 画布 中 绘制 圆 形 ， 可 能 要 涉及 到 下 面 几 个 方法 ， 如 表 9-2 所 示 。 


表 9-2 在 画布 中 绘制 圆 形 涉及 的 方法 


方法 功能 

beginPath() 开始 绘制 路 径 

arc(x,y,radius,startAngle, x 和 y 定义 的 是 圆 的 原点 ，radius 是 圆 的 半径 ，startAngle 和 endAngle 是 弧度 ， 
endAngle,anticlockwise) 不 是 度数 ，anticlockwise 用 来 定义 所 画 圆 的 方向 ， 值 是 true 或 false 
closePath() 结束 路 径 的 绘制 

fill) 进行 填充 

stroke() 方法 设置 边框 


路 径 是 绘制 自 定义 图 形 的 好 方法 ， 在 canvas 中 通过 beginPath0 方 法 开始 绘制 路 径 ， 这 个 
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时 候 就 可 以 绘制 直线 、 曲 线 等 ， 绘 制 完成 后 调用 fil0 和 stroke() 完 成 填充 和 设置 边框 ， 通 过 
closePath() 方 法 结束 路 径 的 绘制 。 


【 例 9.2】《 实 例文 件 : ch09\9.2.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

Var c=document.getElementById("myCanvas"); 
Var cxt=c.getContext("2d"); 
cxt.fillStyle="#FFaa00"; 

cxt.beginPath(); 
cxt.arc(70,18,15,0,Math.PI*2,true); 
cxt.closePath(); 

cxt.fill(); 

</script> 

</body> 

</html> 


上 面 的 JavaScript 代码 中 ， 使 用 beignPath 方法 开启 一 个 路 径 ， 然 后 绘制 一 个 圆 形 ， 下 面 


关闭 这 个 路 径 并 填充 。 


圆 。 


在 IE 9.0 中 的 浏览 效果 如 图 9-2 所 示 ， 可 以 看 到 网 页 中 ,在 矩形 边框 中 显示 了 一 个 黄色 的 


[< | 司 天文 twchl77.2html DO -C X | @ F 源 文件 chl17M7.2html x MA] 


图 9-2 绘制 椭圆 
9.2.2 ”使 用 moveTo 与 lineTo 绘制 直线 


在 每 个 canvas 实例 对 象 中 都 拥有 一 个 path 对 象 ， 创 建 自 定义 图 形 的 过 程 就 是 不 断 对 path 


对 象 操作 的 过 程 。 每 当 开 始 一 次 新 的 图 形 绘制 任务 , 都 需要 先 使 用 beginPath() 方 法 来 重 置 path 


使 用 HTML 5 绘制 图 形 。 第 9 章 


对 象 至 初始 状态 ， 进 而 通过 一 系列 对 moveTo/lineTo 等 画 线 方法 的 调用 ， 绘 制 期 望 的 路 径 ， 殿 
中 moveTo (x, y) 方法 设置 绘图 起 始 坐 标 ， 而 lineTo (x,y) 等 画 线 方法 可 以 从 当前 起 点 绘制 
直线 、 圆 弧 以 及 曲线 到 目标 位 置 。 最 后 一 步 ， 也 是 可 选 的 步骤 ， 是 调用 closePath() 方 法 将 自 定 
义 图 形 进行 闭合 ， 该 方法 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐标 的 直线 。 


表 9-3 绘制 直线 常用 的 方法 
不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 xy) ， 并 作为 线条 开始 点 
绘制 线条 到 指定 的 目标 坐标 (xy) ， 并 且 在 两 个 坐标 之 间 面 一 条 直线 。 不 管 调用 


lineTo (x,y) 哪 一 个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke 绘制》 和 fil (填充 ) 函 


数 。 当 前 ， 只 是 在 定义 路 径 的 位 置 ， 以 便 后 面 绘制 时 使 用 
性 设 线条 多 


【 例 9.3】 实 例文 件 ，ch09\9.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"); 
Var Cxt=c.getContext("2d"); 

cxt.beginPath(); 

cxt.strokeStyle="rgb(0,182,0)"; 
cxt.moveTo(10,10); 

cxt.lineTo(150,50); 

cxt.lineTo(10,50); 

cxt.line Width=14; 

Cxt.stroke(); 

cxt.closePath(); 

</script> 

</body> 

</html> 


上 面 代码 中 ， 使 用 moveTo 方法 定义 一 个 坐标 位 置 为 《10,10) ， 下 面 以 此 坐标 位 置 为 起 
点 绘制 了 两 个 不 同 的 直线 ， 并 使 用 lineWidth 设置 直线 的 宽带 ， 使 用 strokeStyle 设置 了 直线 的 
颜色 ， 使 用 lineTo 设置 了 两 个 不 同 直线 的 结束 位 置 。 
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在 IE9.0 中 的 浏览 效果 如 图 9-3 所 示 ， 可 以 看 到 网 页 中 , 绘制 了 两 个 直线 ， 这 两 个 直线 在 
某 一 点 交叉 。 


BS 知 FA 漂 文 件 \chiN\17.3.html _ 训 -CX| 敬 F 源 文件 ch17\173.html x re 


图 9-3 绘制 直线 


9.2.3 ”使 用 bezierCurveTo 绘制 贝 济 埃 曲线 


在 数学 的 数值 分 析 领 域 中 ， 贝 济 埃 曲线 (Bezier 曲线 ) 是 计算 机 图 形 学 中 相当 重要 的 参数 
曲线 。 更 高 维度 的 广泛 化 贝 济 埃 曲线 就 称 作 贝 济 埃 曲 面 ， 其 中 贝 济 埃 三 角 是 一 种 特殊 的 实例 。 

bezierCurveTo() 表 示 为 一 个 画布 的 当前 子路 径 添 加 一 条 三 次 贝 塞 尔 曲 线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 , 而 结束 点 是 (x, y)。 两 条 贝 塞 尔 曲线 控制 点 (cpX1, cpY1) 和 (cpX2, cpY2) 
定义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x,y) 。 

方法 bezierCurveTo 具体 格式 如 下 所 示 : 


bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) 
其 参数 的 含义 如 表 9-4 所 示 。 


表 9-4 bezierCurveTo 方法 参数 及 含义 


cpX1, cpY1 和 曲线 的 开始 点 〈 当 前 位 置 ) 相关 联 的 控制 点 的 坐标 


cpX2, cpY2 ”| 和 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 
xy | 曲线 的 结束 点 的 坐标 


【 例 9.4】“《 实 例文 件 : ch09\9.4.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 贝 济 埃 曲线 </title> 
<script> 

function draw(id) 

{ 
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Vi 


ar canvas=document.getElementById(id); 


if(canvas—null) 
return false; 


Vi 


ar context=canvas.getContext('2d"); 


contextfillStyle="#eeeeff'; 


Cc 


Vi 


Vi 


Vi 


Vi 


‘ontext.fillRect(0,0,400,300); 
ar n=0; 

ar dx=150; 

ar dy=150; 

ar s=100; 


context.beginPath(); 


Cc 


‘ontext.globalCompositeOperation='and'; 


context.fillStyle='rgb( 100,255,100)'; 
context.strokeStyle='rgb(0,0,100)'; 


Var x=Math.sin(0); 
Var y=Math.cos(0); 
var dig=Math.P1/15*11; 
for(var i=0;i<30;i++) 
{ 
Var x=Math.sin(i*dig); 
Var y=Math.cos(i*dig); 
context.bezierCurveTo(dx+x*s,dyt+y*s-100,dx+x*s+100,dy+y*s,dx 
+x*s,dyty*s); 
} 
context.closePath(); 
context.fill(); 
context.stroke(); 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 绘 制 元 素 <hl> 
<canvas id="canvas" width="400" height="300" 户 
</body> 
</html> 


在 上 述 函数 draw 中 ， 首 先 使 用 语句 fllRect 〈0.0,400,300) 绘制 了 一 个 矩形 ， 


布 相 同 ， 其 填充 颜色 为 浅 青色 ; 然后 定义 变量 ， 用 于 设 定 | 


bezierCurveTo 绘制 贝 济 埃 曲线 。 


在 IE9.0j 


FP 的 浏览 效果 如 图 9-4 所 示 ， 可 以 看 到 网 页 中 显示 了 一 个 贝 济 埃 曲线 。 


线 的 坐标 位 置 ， 在 for 循环 中 使 


大 小 和 画 
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图 9-4 ” 贝 济 埃 曲线 
9.3 绘制 渐变 图 形 

渐变 是 两 种 或 更 多 颜色 的 平滑 过 度 , 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 将 结果 应 用 于 描 边 
样式 和 填充 样式 中 。canvas 的 绘图 上 下 文 支 持 两 种 类 型 的 渐变 ， 即 线性 渐变 和 放射 性 渐变 ， 其 
中 放射 性 渐变 也 称 为 径 向 渐变 。 
9.3.1 绘制 线性 渐变 

创建 简单 的 渐变 ， 非 常 容易 ， 可 能 比 使 用 Photoshop 还 要 快 ， 使 用 渐变 需要 三 个 步骤: 

(QU 创建 渐变 对 象 ， 其 代码 如 下 : 

var gradient=cxt.createLinearGradient(0,0,0,canvas.height); 

t@3 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方 式 ， 其 代码 如 下 : 


Sradient.addColorStop(0,#fff); 
gradient.addColorStop(1,#000"); 


t3j 在 context 上 为 填充 样式 或 者 描 边 样式 设置 渐变 ， 其 代码 如 下 : 


cxt.fillStyle=gradient; 

要 设置 显示 颜色 ， 在 渐变 对 象 上 使 用 addColorStop 函数 即 可 。 除 了 可 以 变换 成 其 他 颜色 
外 ， 还 可 以 为 颜色 设置 alpha 值 〈 例 如 透明 ) ， 并 且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 
的 效果 ， 需 要 使 用 颜色 值 的 男 一 种 表示 方法 ， 例 如 内 置 alpha 组 件 的 CSSrgba 函数 。 

绘制 线性 渐变 ， 会 使 用 到 下 面 几 个 方法 ， 如 表 9-5 所 示 。 


TD 
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表 9-5 ”绘制 线性 渐变 用 到 的 方法 


方法 功能 
函数 允许 指定 两 个 参数 : 颜色 和 偏 移 量 。 颜 色 参 数 是 指 开 发 人 员 希 
addColorStop 望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0~1.0 之 


间 的 数值 ， 代 表 沿 着 渐变 线 渐变 的 距离 有 多 远 
createLinearGradient (x0,y0,x1,x1) | 沿 着 直线 从 x0,y0) 至 (xl,y1) 绘制 渐变 


【 例 9.5】“《 实 例文 件 ，ch09\9.5.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 线 性 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 线性 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border: 1px solid red"/> 
<script type="text/JavaScript"> 

Var c=document.getElementById("canvas"); 

Var cxt=c.getContext("2d"); 

var gradient=cxt.createLinearGradient(0,0,0,canvas.height); 
gradient.addColorStop(0,'#fFF); 
gradient.addColorStop(1,#000"); 

cxt.fillStyle=gradient; 

cxt.fillRect(0,0,400,400); 

</script> 

</body> 

</html> 


上 面 的 代码 使 用 2D 环境 对 象 产 生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 是 (0,0)， 渐 变 的 结 
束 点 是 (0,canvas.height)， 下 面 使 用 addColorStop 函数 设置 渐变 颜色 , 最 后 将 渐变 填充 到 上 下 文 
环境 的 样式 中 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-5 所 示 ， 可 以 看 到 网 页 中 ， 创 建 了 一 个 垂直 方向 上 的 渐变 ， 
从 上 到 下 颜色 逐渐 变 深 。 
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图 9-5 “线性 渐变 
9.3.2 绘制 径 向 渐变 


除了 线性 渐变 以 外 , HTML 5 Canvas API 还 支持 放射 性 渐变 ,所 谓 放射 性 渐变 就 是 颜色 会 
介 于 两 个 指定 圆 间 的 锥 形 区 域 平滑 变化 。 放 射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 
如 果 要 实现 放射 线 渐变 ， 即 径 向 渐变 ， 需 要 使 用 方法 createRadialGradient。 

createRadialGradient (x0,y0,r0,x1,yl,r1) 方法 表示 沿 着 两 个 圆 之 间 的 锥 面 绘制 渐变 。 其 中 
前 三 个 参数 代表 开始 的 圆 ， 圆 心 为 (kx0,y0)， 半 径 为 rr。 最 后 三 个 参数 代表 结束 的 圆 ， 圆 心 为 
(xl,y1) ， 半 径 为 rl。 

【 例 9.6】 《实例 文件 ，ch09\9.6.html) 


<!DOCTYPE html> 

<html> 

<head> 

<title> 径 向 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 径 向 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border: 1px solid red"/> 
<script type="text/JavaScript"> 

var c=document.getElementById("canvas"); 

Var cxt=c.getContext("2d"); 

var gradient=cxt.createRadialGradient(canvas.width/2,canvas.height/2,0,canvas.width/2,canvas.height/2,150); 
Sradient.addColorStop(0,#ffP); 

gradient.addColorStop(1,#000"); 

cxt.fillStyle=gradient; 

cxt.fillRect(0,0,400,400); 

</script> 

</body> 

</html> 
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上 面 代 码 中 ， 首 先 创建 渐变 对 象 gradient， 此 处 使 用 方法 createRadialGradient 创建 了 一 个 
径 向 渐变 ， 下 面 使 用 addColorStop 添加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环 境 中 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-6 所 示 ， 可 以 看 到 从 圆 的 中 心 亮点 开始 ， 向 外 逐步 发 散 ， 形 
成 了 一 个 径 向 渐变 。 
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图 9-6 和 多 向 渐变 
9.4 绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 ， 绘 制图 形 和 线条 ， 还 可 以 使 
用 变换 来 调整 画笔 下 的 画布 。 变 换 的 方法 包括 : 旋转 、 缩 放 、 变 形 和 平移 等 。 


9.4.1 变换 原点 坐标 


平移 〈translate) ， 即 将 绘图 区 相对 于 当前 画布 的 左上 和 角 进 行 平 移 ， 如 果 不 进 行 变形 ， 绘 
图 区 原点 和 画布 原点 是 重合 的 , 绘图 区 相当 于 画图 软件 里 的 热 区 或 当前 层 。 如 果 进 行 变形 ， 则 
坐标 位 置 会 移动 到 一 个 新 位 置 。 

如 果 要 对 图 形 实现 平移 ， 需 要 使 用 方法 translate(x,y)， 该 方法 表示 在 平面 上 平移 ， 即 以 原 
来 的 原点 为 参考 ， 然 后 以 偏 移 后 的 位 置 作 为 坐标 原点 ， 也 就 是 说 如 果 原 来 在 (100,100)， 
translate(1,1) 后 ， 新 的 坐标 原点 在 (101,101) 而 不 是 (1,1)。 

【 例 9.7】〔 实 例文 件 : ch09\9.7.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 坐标 变换 </title> 
<script> 

function draw(id) 

1 


var canvas=document.getElementById(id); 
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if(canvas—null) 

return false; 

Var context=canvas.getContext('2d"); 

context.fillStyle="#eeeeff"; 

context.fillRect(0,0,400,300); 

context.translate(200,50); 

context.fillStyle=rgba(255,0,0,0.25)'; 

for(var i=0;i<S0;i++)f 
context.translate(25,25); 
context.fillRect(0,0,100,50); 


} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<hl> 变 换 原点 坐标 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 draw 函数 中 ,使 用 fillRect 方 法 绘制 了 一 个 矩形 , 在 下 面 使 用 translate 方法 将 其 平移 到 
了 一 个 新 位 置 ， 并 从 新 位 置 开始 ， 使 用 for 循环 ， 连 续 移动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-7 所 示 ， 可 以 看 到 网 页 中 从 坐标 位 置 〈200,50) 开始 绘制 矩 
形 ， 并 每 次 以 指定 的 平移 距离 绘制 矩形 。 


Dr Cr  ，. - 


变换 原点 坐标 


™ 


图 9-7 变换 坐标 原点 


9.4.2 图形 缩放 

对 于 变形 图 形 来 说 ， 其 中 最 常用 的 方式 ， 就 是 对 图 形 进行 缩放 ， 即 以 原来 图 形 为 参考 ， 放 
大 或 者 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩 放 ， 需 要 使 用 scale (xy) 函数 ， 该 函数 带 有 两 个 参数 ， 分 别 代 表 在 x、 
y 两 个 方向 上 的 值 .每 个 参数 在 canvas 显示 图 像 的 时 候 , 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 


“174 。 
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者 缩小 ) 的 量 。 


如 果 x 值 为 2, 就 代表 所 绘制 图 像 中 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 为 0.5， 


绘制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 


【 例 9.8】 


(实例 文件 : ch09\9.8.html) 


<!DOCTYPE html> 


<html> 
<head> 


<title> 绘 制图 形 缩放 </title> 


<script> 


function draw(id) 


{ 


var canvas=document.getElementById(id); 


if(canvas—null) 
return false; 
Var context=canvas.getContext('2d"); 


Cc 


[9 


& 


& 


ontext.fillStyle="#eeeeff"; 
ontext.fillRect(0,0,400,300); 
‘ontext.translate(200,50); 
ontext.fillStyle='rgba(255,0,0,0.25)'; 


for(var i=0;i<S0;i++){f 


} 
</script> 
</head> 


context.scale(3,0.5); 
context.fillRect(0,0,100,50); 


<body onload="draw('canvas');"> 


<hl> 图 形 缩 


放 </hl> 


<canvas id="canvas" width="400" height="300" /> 


</body> 
</html> 


上 面 代码 


Ph， 缩放 操作 是 放 在 for 循环 中 完成 的 ， 在 此 循环 中 ， 以 原来 图 形 为 参考 物 ， 使 


其 在 x 轴 方 向 增加 为 三 倍 宽 ，y 轴 方 向 上 变 为 原来 的 一 半 。 


在 IE9.0j 


bh 的 浏览 效果 如 图 9-8 所 示 ， 可 以 看 到 网 页 中 在 一 个 指定 方向 绘制 了 多 个 矩形 。 
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图 形 缩放 
图 9-8 图形 缩放 


9.4.3 ”旋转 图 形 


变换 操作 并 不 限于 缩放 和 平移 ， 还 可 以 使 用 函数 context.rotate (angle) 来 旋转 图 像 ， 甚 至 
可 以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 例 如 contextrotate 
(1.57) 表示 旋转 角度 参数 以 弧度 为 单位 。 

rotate() 方 法 默认 地 从 左上 端的 (0,.0) 开 始 旋转 ， 通 过 指定 一 个 角度 ， 改 变 画布 坐标 和 Web 
浏览 器 中 <canvas> 元 素 像素 之 间 的 映射 使 得 任意 后 续 绘 图 在 画布 中 都 显示 为 旋转 的 , 但 并 没 
有 旋转 <canvas> 元 素 本 身 。 注 意 ， 这 个 角度 是 用 弧度 指定 的 。 

【 例 9.9】〔 实 例文 件 ，ch09\9.9.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 旋 转 图 像 </title> 
<script> 
function draw(id) 
{ 
var canvas=document.getElementById(id); 
这 canvas 一 null) 
return false; 
Var context=canvas.getContext('2d); 
context.fillStyle="#eeeeff"; 
context.fillRect(0,0,400,300); 
context.translate(200,50); 
context.fillStyle='rgba(255,0,0,0.25)'; 
for(var i=0;i<S0:i++){f 
context.rotate(Math.P1/10); 


context.fillRect(0,0,100,50); 
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</script> 

</head> 

<body onload="draw('canvas');"> 

<h1> 旋 转 图 形 <h1> 

<canvas id="canvas" width="400" height="300" 廊 
</body> 

</html> 


上 面 代码 中 ， 使 用 rotate 方法 在 for 循环 中 对 多 个 图 形 进行 旋转 ， 其 旋转 角度 相同 。 
在 IE 9.0 中 的 浏览 效果 如 图 9-9 所 示 , 在 显示 页 面 上 多 个 矩形 以 中 心 弧度 为 原点 进行 旋转 。 


EL 
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旋转 图 形 


图 9-9 旋转 图 形 
9.5 ”图形 组 合 


在 前 面 介绍 的 知识 里 面 ， 可 以 将 一 个 图 形 画 在 另 一 个 图 形 之 上 , 大 多 数 情况 下 , 这 样 是 不 
够 的 。 例 如 ， 这 样 会 受制 于 图 形 的 绘制 顺序 。 不 过 ， 可 以 利用 globalCompositeOperation 属性 
来 改变 这 些 做 法 。 不 仅 可 以 在 已 有 图 形 后 面 再 画 新 图 形 , 还 可 以 用 来 遮盖 、 清 除 ( 比 clearRect 
方法 强劲 得 多 ) 某 些 区 域 。 

其 语法 格式 如 下 : 


globalCompositeOperation = type 

表示 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 存在 的 canvas 内 容 ， 圆 的 图 
形 是 新 的 形状 ， 其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 面 画 新 的 形状 。 
属性 值 type 具有 12 个 含义 ， 其 具体 含义 如 表 9-6 所 示 。 


表 9-6 type 的 属性 值 


属性 值 说 明 


source-over (default) | 这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 


会 在 原 有 内 容 之 下 绘制 新 图 形 
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( 续 表 ) 


属性 值 


说 明 


source-in 


新 图 形 会 仅仅 出 现 与 原 有 内 容重 三 的 部 分 。 其 他 区 域 都 变 成 透明 的 


destination-in 


source-out 


原 有 内 容 中 与 新 图 形 重 秋 的 部 
结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重 辣 的 部 分 会 


会 被 保留 ， 其 他 区 域 都 变 成 透明 的 


被 绘制 出 来 


destination-out 


原 有 内 容 中 与 新 图 形 不 重 炙 的 部 分 会 被 保留 


source-atop 


destination-atop 


新 图 形 中 与 原 有 内 容重 分 会 被 绘制 ， 并 覆 
原 有 内 容 中 与 新 内 容重 


盖 于 原 有 内 容 之 上 


的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 


<title> 绘 制图 形 组 合 </title> 


<script> 


function draw(id) 


{ 


var canvas=document.getElementById(id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext('2d"); 
Var oprtns=new Array( 
"source-atop", 
"source-in", 
"source-out", 
"source-Over", 
"destination-atop", 
"destination-in", 
"destination-out", 


"destination-over", 


"lighter", 
"copy", 
x 

六 
Var i=10; 


context.fillStyle="blue"; 


lighter 两 图 形 中 重 疮 部 分 绘制 两 种 颜色 值 相 加 的 颜色 
darker 两 图 形 中 重 疮 的 部 分 绘制 两 种 颜色 值 相 减 的 颜色 
XOT 重 受 的 部 分 会 变 透 明 
copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 
【 例 9.10】“〔 实 例文 件 ，ch09\9.10.html) 

<!DOCTYPE html> 

<html> 

<head> 
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context.fillRect(10,10,60,60); 
context.globalCompositeOperation=oprtns[i]; 
context.beginPath(); 
context.fillStyle="red"; 

context.arc(60,60,30,0,Math.PI*2,false); 
context.fill(); 

} 

</script> 

</head> 

<body onload="draw('canvas'):"> 

<h1> 图 形 组 合 <hl> 

<canvas id="canvas" width="400" height="300" /> 

</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 创 建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 12 个 值 ， 然 后 绘制 了 一 
个 矩形 ， 并 使 用 content 上 下 文 对 象 设置 了 图 形 的 组 合 方式 ， 即 采用 了 新 图 形 显示 ， 其 他 被 清 


除 的 方式 ， 最 后 使 用 arc 绘制 了 一 个 圆 。 


在 IE 9.0 中 的 浏览 效果 如 图 9-10 所 示 ， 在 显示 页 面 上 绘制 了 一 个 矩形 和 圆 ， 但 矩形 和 辆 


接触 的 地 方 ， 以 空白 显示 。 


Osomiomm pr-cx]eewmee x] | 
图 形 组 合 


中 


图 9-10 图 形 组 合 


9.6 ”绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非 常 简单 ， 只 需要 设置 几 个 属性 即 可 。 这 几 个 
属性 分 别 为 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor, 其 属性 shadowColor 
表示 阴影 颜色 ， 其 值 和 CSS 颜色 值 一 致 。shadowBlur 表示 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 
影 越 模糊 。shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 


【 例 9.11】 《实例 文件 :ch09\9.11.html) 


<!DOCTYPE html> 
<html> 
<head> 
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<title> 绘 制 阴影 效果 图 形 </title> 
</head> 
<body> 
<canvas id="my_canvas" width="200" height="200" style="border: px solid #ff0000"></canvas> 
<script type="text/JavaScript"> 
var elem = document.getElementById("my_canvas"); 
if (elem && elem.getContext) { 
var context = elem.getContext("2d"); 
//shadowOffsetX 和 shadowOffsetY: 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 
contextshadowOffsetX = 15; 
contextshadowOffsetY = 15; 
//hadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 影 越 模糊 。 其 效果 和 Photoshop 的 高 斯 


模糊 滤 镜 相同 。 
contextshadowBlur = 10; 
/shadowColor: 阴影 颜色 。 其 值 和 CSS 颜色 值 一 致 。 
/context.shadowColor = 'rgba(255, 0, 0, 0.53); 或 下 面 的 十 六 进 制 的 表示 方法 
context.shadowColor = #f00'; 
context.fillStyle = #00f; 
context.fillRect(20, 20, 150, 100); 
} 
</script> 
</body> 
</html> 


在 IE 9.0 中 的 浏览 效果 如 图 9-11 所 示 ， 在 显示 页 面 上 显示 了 一 个 蓝 色 矩形， 其 阴影 为 红 
色 和 矩形 。 


[e-em 
等 下 R\ 源 文件 khl7V7.1Lhtml -0 X | @ 地 制 阴 影 履 果 到 形 a 


图 9-11 带 有 阴影 的 图 形 
9.7 ”使 用 图 像 


画布 canvas 有 一 项 功能 就 是 可 以 引入 图 像 ， 它 可 以 用 于 图 片 合成 或 者 制作 背景 等 。 而 目 
前 仅 可 以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 (如 PNG、GIF、JPEG 等 ) 都 可 以 引 
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入 到 canvas 中 ， 而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


9.7.1 绘制 图 像 


要 在 画布 canvas 上 绘制 图 像 ,需要 先 有 一 个 图 片 。 这 个 图 片 可 以 是 已 经 存在 的 <img> 元 素 ， 


或 者 通过 JS 创建 。 无 论 采 用 哪 种 方式 ， 


都 需要 在 绘制 canvas 之 前 ， 加 载 这 张 图 片 。 浏 览 器 通 


常会 在 页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 试 图 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 
canvas 上 ， 那 么 canvas 将 不 会 显示 任何 图 片 。 
捕获 和 绘制 图 形 完全 是 通过 drawImage 方法 完成 的 ， 它 可 以 接受 不 同 的 HTML 参数 ， 具 


体 含 义 如 表 9-7 所 示 。 


表 9-7 drawlmage 方法 


方法 


drawIamge (image,dx,dy) 


drawlamge (image,dx,dy,dw,dh) 


drawIamge (image,sx,sy,sw,sh,dx,dy,dw,dh) 


说 明 

接受 一 个 图 片 ， 并 将 之 画 到 canvas 中 。 给 出 的 坐标 (dx,dy) 代 
表 图 片 的 左上 角 。 例 如 ， 坐 标 (0,0) 将 把 图 片 画 到 canvas 的 左 
上 角 

接受 一 个 图 片 ， 将 其 缩放 ， 宽 度 为 aw， 高 度 为 dh， 然 后 把 它 
画 到 canvas 上 的 (dx,dy) 位 置 

接受 一 个 图 片 ， 通 过 参数 (sx,sy.sw,sm 指 定 图 片 裁剪 的 范围 ， 
缩放 到 (dw,dh) 大 小 ， 最 后 把 它 画 到 canvas 上 的 (dx,dy) 位 置 


【 例 9.12】 【实例 文件 ，ch09\9.12.html) 


<!DOCTYPE html> 

<html> 
<head><title> 绘 制图 像 </title></head> 
<body> 


<canvas id="canvas" width="300" height="200" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 


</canvas> 
<script type="text/JavaScript"> 
window.onload=function(){ 


var ctx=document.getElementByld("canvas").getContext("2d"); 


var img=new Image(); 

img.src="01.jpg"; 

img.onload=function(){ 
ctx.drawImage(img,0,0); 
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在 上 面 代 码 中 ， 使 用 窗口 的 onload 加 载 事 件 ， 即 页 面 被 加 载 时 执行 函数 。 在 函数 中 ， 创 
建 上 下 文 对 象 ctx， 并 创建 Image 对 象 img; 下 面 使 用 img 对 象 的 属性 src 设置 图 片 来 源 , 最 后 
使 用 drawImage 画 出 当前 的 图 像 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-12 所 示 ， 在 页 面 上 绘制 了 一 个 图 像 ， 并 在 画布 中 显示 出 来 。 
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图 9-12 绘制 图 像 


9.7.2 图像 平 铺 


使 用 画布 canvas 绘制 图 像 ， 有 很 多 种 用 处 ， 其 中 一 个 用 处 就 是 将 绘制 的 图 像 作为 背景 图 
片 使 用 。 在 做 背景 图 片 时 ,如 果 显 示 图 片 的 区 域 大 小 不 能 直接 设 定 , 通常 将 图 片 以 平 铺 的 方式 
显示 。 

HTML 5 Canvas API 支持 图 片 平 铺 , 此 时 需要 调用 createPattern 函数 , 即 调用 createPattern 
函数 来 替代 之 前 的 drawImage 函数 。 函 数 createPattern 的 语法 格式 如 下 : 

createPattern(image,type) 

其 中 image 表示 要 绘制 的 图 像 ，type 表示 平 铺 的 类 型 ， 其 具体 含义 如 表 9-8 所 示 。 


表 9-8 type 参数 及 含义 


参数 值 说 明 
no-repeat 不 平 铺 
| i 横 方向 平 铺 
| repeat-y 纵 方向 平 铺 
| repeat 全 方向 平 铺 


【 例 9.13】〔 实 例文 件 ， ch09\9.13.html) 


<title> 绘 制图 像 平 铺 </title> 
</head> 
<body onload="draw('canvas');"> 
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<h1> 图 形 平 铺 <h1> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 
var canvas=document.getElementById(id); 
这 canvas 一 null)f 
return false; 
上 
Var context=canvas.getContext('2d"); 
context.fillStyle="#eeeeff"; 
context.fillRect(0,0,400,300); 
image=new Image(): 
image.src="01.jpg"; 
image.onload=function(){ 
Var ptrn=context.createPattern(image,'repeat ); 
context.fillStyle=ptrn; 
contextfilIRect(0.0.400.300); 
} 
} 
</script> 
</body> 
</html> 


上 面 代 码 中 ， 使 用 fillRect 创建 了 一 个 宽度 为 400、 高 度 为 300、 左 上 角 坐 标 位 置 为 (0,0) 
的 和 矩形， 下面 创建 了 一 个 Image 对 象 ，src 表示 连接 一 个 图 像 源 ， 然 后 使 用 createPattern 绘制 
-个 图 像 ， 其 方式 是 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 矩形 中 。 最 后 绘制 这 个 矩形， 此 
矩形 大 小 完全 覆盖 原来 的 图 形 。 
在 IE 9.0 中 的 浏览 效果 如 图 9-13 所 示 ， 在 显示 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 平 铺 的 
方式 充满 整个 矩形 。 


[¢ 问 关 FA 天 文件 chl7Vl713html| 。 用 = C X | 居 冯 加 @ 二 汪 x I 


图 形 平 铺 


图 9-13 图 像 平 铺 
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9.7.3 ”图 像 裁剪 


在 处 理 图 像 时 经 常会 遇 到 裁剪 这 种 需求 , 即 在 画布 上 裁剪 出 一 块 区 域 , 这 块 区 域 是 在 裁剪 
动作 clip 之 前 ， 由 绘图 路 径 设 定 的 ， 可 以 是 方形 、 圆 形 、 五 星 形 和 其 他 任何 可 以 绘制 的 轮廓 形 
状 。 所 以 ， 裁 前 路径 其 实 就 是 绘图 路 径 ， 只 不 过 这 个 路 径 不 是 拿 来 绘图 的 ， 而 是 设 定 显示 区 域 
和 款 挡 区 域 的 一 个 分 界线 。 

完成 对 图 像 的 裁剪 ， 可 能 要 用 到 clip 方法 。clip 方法 表示 给 canvas 设置 一 个 剪辑 区 域 , 在 
调用 clip 方法 之 后 的 代码 只 对 这 个 设 定 的 剪辑 区 域 有 效 , 不 会 影响 其 他 地 方 , 这 个 方法 在 要 进 
行 局 部 更 新 时 很 有 用 。 默 认 情况 下 ， 剪 辑 区 域 是 一 个 左上 角 在 〈0,0) 、 宽 和 高 分 别 等 于 canvas 
元 素 的 宽 和 高 的 矩形 。 

【 例 9.14】 “实例 文件 ，ch09\9.14.html) 


<!DOCTYPE html> 
< html> 
<head> 
<title> 绘 制图 像 裁剪 </title> 
<script type="text/JavaScript" src="script.js"></script> 
</head> 
<body onload="draw('canvas'):"> 
<hl> 图 像 裁 前 实例 </h1> 
<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
function draw(id){ 
Var canvas=document.getElementById(id); 
if(canvas=——null){ 
return false; 
} 
Var context=canvas.getContext('2d"); 
Var gr=context.createLinearGradient(0,400,300,0); 
gr.addColorStop(0,'rgb(255,255,0)"); 
gr.addColorStop(1,'rgb(0,255,255)"); 
context.fillStyle=gr; 
context.fillRect(0,0,400,300); 
image=new Image(); 
image.onload=function(){ 
drawImg(context,image); 
相 
image.src="01.jpg"; 
function drawImg(context,image){ 
create8StarClip(context); 
context.drawImage(image,-50,-150,300,300); 


上 面 代码 中 ， 创 建 了 三 个 JavaScript 函数 ， 其 中 create8StarClip 函数 完成 了 多 边 的 图 形 创 
建 , 并 以 此 图 形 作为 裁剪 的 依据 。 drawImg 函数 表示 绘制 一 个 图 形 , 其 图 形 带 有 裁剪 区 域 。 draw 
函数 完成 对 画布 对 象 的 获取 ， 并 定义 线性 渐变 ， 然 后 创建 Image 对 象 。 

在 IE 9.0 中 浏览 效果 如 图 9-14 所 示 ， 在 显示 页 面 上 绘制 如 图 所 示 的 图 形 ， 将 图 像 作为 该 
图 形 的 背景 显示 ， 从 而 实现 对 图 像 的 裁剪。 


图 9-14 图 像 裁剪 
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9.7.4 ”像素 处 理 


在 计算 机 屏幕 上 可 以 看 到 色彩 斑 澜 的 图 像 , 其 实 这 些 图 像 都 是 由 一 个 个 像素 点 组 成 的 ,一 
个 像素 对 应 着 内 存 中 的 一 组 连续 的 二 进 制 位 ， 由 于 是 二 进 制 位 , 每 个 位 上 的 取 值 当然 只 能 是 0 
或 者 1 了 , 这 样 , 这 组 连续 的 二 进 制 位 就 可 以 由 0 和 1 排列 组 合 出 很 多 种 情况 ， 而 每 一 种 排列 
组 合 就 决定 了 这 个 像素 的 一 种 颜色 。 因 此 ， 每 个 像素 点 由 4 个 字 节 组 成 。 

这 4 个 字 节 代表 含义 分 别 是 , 第 一 个 字 节 决定 像素 的 红色 值 ; 第 二 个 字 节 决定 像素 的 绿色 
值 ， 第 三 个 字 节 决定 像素 的 蓝 色 值 ; 第 四 个 字 节 决 定 像素 的 透明 度 值 。 

在 画布 中 ， 可 以 使 用 ImageData 对 象 来 保存 图 像 像素 值 ， 它 有 width、height 和 data 三 个 
属性 ， 其 中 data 属性 就 是 一 个 连续 数组 ， 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 

data 属性 保存 像素 值 的 方法 : 


imageData.data[index*4 +0] 
imageData.data[index*4 +1] 
imageData.data[index*4 +2] 
imageData.data[index*4 +3] 


上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 ,这 4 个 值 分 别 代 表 了 图 像 中 第 index+1 个 像素 
的 红色 、 绿 色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 index 从 0 开始 ， 图 像 中 总 共有 width * 
height 个 像素 ， 数 组 中 总 共 保 存 了 width * height * 4 个 数值 。 

画布 对 象 有 三 个 方法 用 来 创建 、 读 取 和 设置 ImageData 对 象 ， 如 表 9-9 所 示 。 


表 9-9 画面 对 象 的 方法 


createImageData (width, 在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 〈 即 像素 数组 ) ， 对 象 中 的 


getImageData (x,y, width, 返回 一 个 ImageData 对 象 ， 这 个 IamgeData 对 象 中 包含 了 指定 区 域 的 像素 
height) 数组 


将 ImageData 对 象 绘制 到 屏幕 的 指定 区 域 上 


【 例 9.15】 《实例 文件 ，ch09\9.15.html) 


<!DOCTYPE html> 

< html> 

<head> 

<title> 图 像 像素 处 理 </title> 

‘<script type="text/JavaScript" sre="script.js"></script> 
</head> 

<body onload="draw('canvas');"> 

<h1> 像 素 处 理 示例 <hl> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 
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function draw(id){ 
var canvas=document.getElementById(id); 
if(canvas—null){ 
Teturn false; 


context.drawImage(image,0,0); 
var imagedata=context.getImageData(0,0,image.width,image.height); 
for(var i=0,n=imagedata.data.length;i<n;i+=4){ 


imagedata.data[i+0]=255-imagedata.data[i+0]; 
imagedata.data[i+1]=255-imagedata.data[i+2]; 
imagedata.datali+2]=255-imagedata.data[i+1]; 
4 
context.putImageData(imagedata,0,0); 
}3 
1 
</script> 
</body> 
</html> 


在 上 面 代 码 中 ,使 用 getImageData 方法 获取 一 个 ImageData 对 象 ,并 包含 相关 的 像素 数组 。 
在 for 循环 中 , 对 像素 值 重 新 赋值 , 最 后 使 用 putImageData 将 处 理 过 的 图 像 在 画布 上 绘制 出 来 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-15 所 示 ， 在 显示 页 面 上 显示 了 一 个 图 像 ， 其 图 像 明 显 经 过 
像素 处 理 ， 显 示 没 有 原来 清晰 。 


[¢ 回 由 所 源 文件 \ch17\17.15.html 甩 -C X 上 总 图 从 从 素 处 理 x| 


像素 处 理 示 例 


图 9-15 像素 处 理 
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9.8 绘制 文字 


在 画布 中 绘制 字符 串 〈 文 字 ) 的 方式 ， 与 操作 其 他 路 径 对 象 的 方式 相同 ， 可 以 描绘 文本 轮 
廓 和 填充 文本 内 部 ， 同 时 ， 所 有 能 够 应 用 于 其 他 图 形 的 变换 和 样式 都 能 用 于 文本 。 
文本 绘制 的 方法 ， 如 表 9-10 所 示 。 


表 9-10 文本 绘制 方法 


| 方法 说 明 
绘制 带 fillStyle 填充 的 文字 ， 文 本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参 
fillText (text,x,y,maxwidth) 数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 强制 收 
缩 到 指定 尺寸 


trokeText (text,x,y,maxwidth) 绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 和 方法 与 fillText 相同 


该 函数 会 返回 一 个 度量 对 象 , 其 包含 了 在 当前 context 环境 下 指定 文本 的 
measureText a 
实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 下 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 : 


@ font 可 以 是 CSS 字体 规则 中 的 任何 值 。 包 括 字体 样式 、 字 体 变 种 、 字 体 大 小 与 粗细 、 
行 高 和 字体 名 称 。 

@ textAlign 控制 文本 的 对 齐 方式 。 它 类 似 于 (但 不 完全 相同 ) CSS 中 的 text-align。 可 能 
的 取 值 为 start、end、left、right 和 center。 

@@ textBaseline 控制 文本 相对 于 起 点 的 位 置 . 可 以 取 值 有 top、 hanging、 middle、 alphabetic、 
ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 地 使 用 top、middle 或 bottom 
作为 文本 基线 。 


【 例 9.16】〔 实 例文 件 ，ch09\9.16.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my_canvas" width="200" height="200" style="border: 1px solid #ff0000"></canvas> 
<script type="text/JavaScript"> 
var elem = document.getElementByld("my canvas"); 
if (elem && elem.getContext) { 
Var context = elem.getContext("2d"); 
context.fillStyle = #00f; 
//font: 文字 字体 ， 同 CSSfont-family 属性 
contextfont = 'italic 30px 微软 雅 黑 ; /斜体 30 像素 微软 雅 黑 字体 
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//textAlign: 文字 水 平 对 齐 方式 。 可 取 属 性 值 : start, end, left,right, center。 默 认 值 :start. 
context.textAlign = left; 
// 文 字 竖 直 对 齐 方式 。 可 取 属 性 值 : top, hanging, middle,alphabetic, ideographic, bottom。 
默认 值 : alphabetic 
context.textBaseline = 'top'; 
// 要 输出 的 文字 内 容 , 文字 位 置 坐标 , 第 四 个 参数 为 可 选 选 项 一 一 最 大 宽度 。 如 果 需 要 的 
话 ， 浏 览 器 会 缩减 文字 以 让 它 适应 指定 宽度 
contextfillText (祖国 生日 快乐 " 0, 0.50); ”// 有 填充 
contextfont = "bold 30px sans-serif; 
context.strokeText(' 祖 国生 日 快乐 !, 0, 50.100); /只 有 文字 边框 
} 
</script> 
</body> 
</html> 


在 IE 9.0 中 的 浏览 效果 如 图 9-16 所 示 ， 在 页 面 上 显示 画布 边框 ， 画 布 中 显示 了 两 个 不 同 
的 字符 串 , 第 一 个 字符 串 以 斜体 显示 , 颜色 为 蓝 色 。 第 二 个 字符 串 字 体 颜 色 为 黑色 , 加 粗 显示 。 


[eal] 


coves "a 


Fgh.16hm! DP- Ox 


图 9-16 绘制 文字 


9.9 图 形 的 保存 与 恢复 


在 画布 对 象 绘制 图 形 或 图 像 时 , 可 以 将 这 些 图 形 或 者 图 形 的 状态 进行 改变 , 即 永久 保存 图 
形 或 图 像 。 


9.9.1 保存 与 恢复 状态 


在 画布 对 象 中 ， 有 两 个 方法 管理 绘制 状态 的 当前 栈 ，save 方法 把 当前 状态 压 入 栈 中 ， 而 
restore 方法 从 栈 顶 弹出 状态 ， 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事情 ， 其 中 save 方法 用 来 
保存 canvas 的 状态 。 调 用 完 save 方法 之 后 ， 可 以 调用 canvas 进行 平移 、 放 缩 、 旋 转 、 错 切 和 
裁剪 等 操作 。restore 方法 用 来 恢复 canvas 之 前 保存 的 状态 ， 防 止 调 用 save 方法 后 对 canvas 执 
行 的 操作 对 后 续 的 绘制 有 影响 。save 方法 和 restore 方法 要 配对 使 用 (restore 方法 可 以 比 save 
方法 少 ， 但 不 能 多 ) ， 如 果 restore 方法 调用 次 数 比 save 方法 多 ， 会 引发 Error。 
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【 例 9.17】 “实例 文件 :ch09\9.17.html) 


<!DOCTYPE html> 

<html> 

<head><title> 保 存 与 恢复 </title></head> 
<body> 

<canvas id="myCanvas" width="500" height="400" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"); 
Var ctx=c.getContext("2d"); 

ctx.fillStyle = "rgb(0,0,255)"; 

ctx.save(); 

ctx.fillRect(50,50,100,100); 

ctx.fillStyle = "rgb(255,0,0)"; 

ctx.save(); 

ctx.fillRect(200,50,100,100); 

ctx.restore() 

ctx.fillRect(350,50,100,100); 

ctx.restore(); 

ctx.fillRect(50, 200, 100, 100); 

</script> 

</body> 

</html> 


在 上 面 代 码 中 ， 绘 制 了 4 个 矩形 ， 在 第 一 个 矩形 绘制 之 前 ， 定 义 了 当前 矩形 的 显示 颜色 ， 
并 将 此 样式 加 入 到 栈 中 ,然后 创建 算 形 。 第 二 个 矩形 绘制 之 前 ,重新 定义 矩形 显示 颜色 ， 并 使 
用 save 方 法 将 此 样式 压 入 到 栈 中 , 然后 创建 了 一 个 矩形 。 在 第 三 个 矩形 绘制 之 前 , 使 用 restore 
方法 恢复 当前 显示 颜色 ， 即 调用 栈 中 的 最 上 层 颜 色 ,， 绘制 矩形 。 第 四 个 矩形 绘制 之 前 ， 继 续 使 
用 restore 方法 ， 调 用 最 后 一 个 栈 中 元 素 定义 矩形 颜色 。 

在 IE 9.0 中 的 浏览 效果 如 图 9-17 所 示 ， 在 页 面 上 绘制 了 4 个 矩形 ， 第 一 个 和 第 四 个 矩形 
显示 为 蓝 色 ， 第 二 个 和 第 三 个 矩形 显示 为 红色 。 


[= 


图 9-17 恢复 和 保存 
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9.9.2 保存 文件 


当 绘 制 出 漂亮 的 图 形 时 ， 有 时 需要 保存 这 些 劳动 成 果 。 这 时 可 以 将 画布 元 素 〈 而 不 是 2D 
环境 ) 的 当前 状态 导出 到 URL 数据 。 导 出 很 简单 ， 可 以 利用 toDataURL 方法 完成 ， 它 可 以 调 
不 同 的 图 片 格式 。 目 前 PNG 格式 才 是 定义 的 规范 格式 ， 其 他 浏览 器 还 支持 其 他 的 格式 。 

目前 Firefox 和 Opera 浏览 器 只 支持 PNG 格式 ，Safari 支持 GIF、PNG 和 JPG 格式 。 大 多 
数 浏览 器 支持 读 取 base64 编码 内 容 ， 例 如 一 幅 图 像 。URL 的 格式 如 下 。 


data:image/png;base64,iVBORwOKGgoAAAANSUhEUgAAAfQAAAHOCAYAAADL1t 


它 以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 原 
始 数据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏 览 器 能 够 将 数据 编码 为 真正 的 资源 。 
【 例 9.18】 “实例 文件 ，ch09\9.9.html) 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="500" height="500" style="border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"); 

Var cxt=c.getContext("2d"); 
cxt.fillStyle='rgb(0,0,255)'; 
cxt.fillRect(0,0,cxt.canvas.width,cxt.canvas.height); 
cxt.fillStyle="rgb(0,255,0)"; 

cxt.fillRect(10,20,50,50): 
window.location=cxt.canvas.toDataURL(image/png "); 
</script> 

</body> 

</html> 


在 上 面 代码 中 ， 使 用 canvas.toDataURL 语句 将 当前 绘制 的 图 像 保 存 到 URL 数据 中 。 
在 IE 9.0 中 浏览 效果 如 图 9-18 所 示 ， 在 显示 页 面 中 无 任何 数据 显示 ， 并 且 提 示 无 法 显示 
该 页 面 。 此 时 需要 注意 的 是 地 址 栏 中 的 URL 信息 。 
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Se 乱 datainpege/pnibaseos VE 万 - OX | sean 


Fi 无 法 显示 该 网 页 


最 可 能 的 原因 是 : 
。 此 网 页 上 某 些 内 容 或 文件 所 需 的 程序 尚未 安装 . 


您 可 以 兰 试 以 下 操作 : 
@@” 联 机 搜索 可 用 于 查看 此 Web 内 容 的 程序 
@ 重新 刍 入 地 址 . 


9 返回 到 上 一 页 。 


图 9-18 保存 图 形 
9.9.3 绘制 图 形 综合 应 用 


绘制 商标 是 canvas 画布 的 用 途 之 一 ， 可 以 绘制 adidas 和 Nike 商标 。Nike 的 商标 比 adidas 
的 商标 复杂 得 多 ，adidas 都 是 由 直线 组 成 的 ， 而 Nike 的 多 了 曲线 。 实 现 本 实例 的 步骤 如 下 所 


和 分 析 需 求 。 要 绘制 两 条 曲线 ， 需 要 找到 曲线 的 参考 点 (参考 点 决定 了 曲线 的 曲率 ) ， 
这 需要 慢 慢 地 移动 ， 然 后 再 看 效果 ， 要 反复 试验 。quadraticCurveTo (30,79,99,78 ) 函数 有 两 
组 坐标 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 。 

to3 构建 HTML， 实 现 canvas 画布 。 在 IE 9.0 中 浏览 效果 如 图 9-19 所 示 ， 此 时 只 显示 一 
个 画布 边框 ， 其 内 容 还 没有 绘制 。 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制 商标 </title> 

</head> 

<body> 

<canvas id="adidas" width="375px" height="132px" style="border: 1px solid #000:;"></canvas> 
</body> 

</html> 


:7g 


9-19 ”定义 画布 边框 


W083 用 JavaScript 实现 基本 图 形 。 在 IE 9.0 中 浏览 效果 如 图 9-20 所 示 ， 显 示 了 一 个 商标 
图 案 ， 其 代码 如 下 : 
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万 ] FA\ 源 文件 ch17\17.19html 人 -CX|é€ 


图 9-20 绘制 的 商标 
9.10 ”综合 实例 一 一 绘制 火柴 棒 人 物 


漫画 中 最 常见 的 一 种 图 形 ， 就 是 火柴 棒 人 ,通过 简单 的 几 个 笔画 ， 就 可 以 绘制 一 个 传神 的 
动漫 人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 具 体 步 骤 如 下 所 示 。 
t0g 分 析 需 求 。 一 个 火柴 棒 人 ， 由 以 下 两 个 部 分 组 成 : 脸 部 ， 身 暴 。 脸 部 是 一 个 圆 形 ， 


其 中 包括 眼睛 和 跨 ; 身躯 由 几 条 直线 组 成 ,包括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 
和 直线 的 组 合 。 实 例 完 成 后 ， 效 果 如 图 9-21 所 示 。 


【¢ 问 间 局 洒 六 伯 \ch1717.20 html -CX 局 从 和 tk 本人 


图 9-21 火柴 棒 人 物 


to3 在 HTML 页 面 实现 定义 画布 canvas。 在 IE 9.0 中 浏览 效果 如 图 9-22 所 示 ， 页 面 中 显 
示 了 一 个 画布 边框 ， 其 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<title> 绘 制 火柴 棒 人 </title> 

<body> 

<canvas id="myCanvas" width="500" height="300" style="border: 1px solid blue"> 
Your browser does not support the canvas element. 

</canvas> 

</body> 
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</html> 


【< 加 | 司 FYI\ch171720.hml 亡 ~ C X | 全 夫 sks 本 人 


图 9-22 定义 画布 边框 
to3j 实现 头 部 轮廓 绘制 ， 代 码 如 下 : 


‘<script type="text/JavaScript"> 

var c=document.getElementById("myCanvas"); 

Var cxt=c.getContext("2d"); 

cxt.beginPath(); 

cxt.arc(100,50,30,0,Math.PI*2,true): 

ext.fill(); 

</script> 

to 约 执行 程序 后 ， 将 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc 函数 中 ，x 和 y 的 
坐标 为 (100,50)， 半 径 为 30 像素 ， 另 两 个 参数 为 弧度 的 开始 和 结束 ， 第 六 个 参数 表示 绘制 弧 形 
的 方向 ， 即 顺 时 针 和 递 时 针 方 向 。 在 IE 9.0 中 浏览 效果 如 图 9-23 所 示 ， 页 面 中 显示 了 一 个 实 
心 圆 ， 其 颜色 为 黑色 。 


OE em nm o- cx|S rs 


图 9-23 ”绘制 头 部 轮廓 
tog 用 JavaScript 绘制 笑脸 ， 代 码 如 下 : 


cxt.beginPath(); 
cxt.strokeStyle='#c00'; 
cxt.lineWidth=3; 
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cxt.arc(100,50,20,0,Math.Pl,false); 

cxt.stroke(); 

t@8j 此 处 使 用 beginPath 方法 ， 表 示 重 新 绘制 ， 并 设 定 线条 宽度 ， 然 后 绘制 弧 形 ， 从 嘴角 
开始 。 在 IE 9.0 中 浏览 效果 如 图 9-24 所 示 ， 页 面 上 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 


【¢ 加 FMVchiNI720 tml PP - OX | 生生 bjcs 人 昌国 国人 于 


图 9-24 绘制 笑脸 


t0 用 JavaScript 绘制 眼睛 : 首先 填充 弧 线 , 创建 了 一 个 实体 样式 的 眼睛 ，arc 绘制 左 眼 ， 
然后 使 用 moveto 绘制 右 眼 。 在 IE 9.0 中 浏览 效果 如 图 9-25 所 示 ， 页 面 显 示 了 一 双眼 睛 。 其 代 
码 如 下 : 


cxt.beginPath(); 
cxt.fillStyle="#c00"; 
cxt.arc(90,45,3,0,Math.PI*2,true); 
cxt.fill(); 

cxt.moveTo(113,45); 
cxt.arc(110,45,3,0,Math.PI*2,true); 
cxt.fill(); 

cxt.stroke(); 


3 
4 
3 


[加 司 天文 作 khl71T20html 及 ”C X | 车 闪 对 X 攻 二 人 


图 9-25 ”绘制 眼睛 


08) 绘制 身躯 ， 代 码 如 下 : 


OBS 
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cxt.moveTo(100,80); 
cxt.lineTo(100,150); 
cxt.moveTo(100,100), 
cxt.lineTo(60,120); 
cxt.moveTo(100,100); 
cxt.lineTo(140,120); 
cxt.moveTo(100,150); 
cxt.lineTo(80,190); 
cxt.moveTo(100,150); 
cxt.lineTo(140,190); 
cxt.stroke(); 


上 面 代码 以 moveTo 作为 开始 坐标 ， 以 lineTo 为 终点 , 绘制 不 同 的 直线 ， 这 些 直线 的 坐标 
位 置 需要 在 不 同 地 方 汇集 ， 两 上 只 手 在 坐标 (100,100) 以 上 交叉 ， 两 只 脚 在 坐标 (100,150) 处 交叉 。 
在 IE 9.0 中 浏览 效果 如 图 9-21 所 示 ， 页 面 显 示 了 一 个 火柴 棒 人 物 ， 相 比较 图 9-24， 多 了 

-个 身躯 。 


9.11 ”问题 解答 


1， 定义 canvas 宽度 和 高 度 时 ， 是 否 可 以 在 CSS 属性 中 定义 ? 
添加 canvas 标签 时 ， 会 在 canvas 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 宽度 : 


<canvas width="500" height="400">Not Supported!</canvas> 


如 果 把 高 度 和 宽度 写 在 CSS 里 面 , 结果 发 现在 绘图 的 时 候 坐 标 获取 出 现 差异 ,canvas.width 
和 canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 个 属性 必须 
canvas 和 标记 一 起 出 现 。 


2. 画布 中 Stroke 和 Fill 二 者 的 区 别 是 什么 ? 

HTML 5 中 将 图 形 分 为 两 大 类 : 第 一 类 称 作 Stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 之 ， 图 
形 是 由 线条 组 成 的 ， 第 二 类 称 作 Fill， 就 是 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 方法 ， 
可 以 让 程序 员 更 好 地 理解 这 两 大 类 图 形 的 区 别 : strokeRect 和 fillRect。 
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目前 , 在 网 页 上 没有 关于 音频 和 视频 的 标准 , 多 数 音频 和 视频 都 是 通过 插件 来 播放 的 。 为 
此 ，HTML 5 新 增 了 音频 和 视频 的 标签 。 本 章 将 讲述 音频 和 视频 的 基本 概念 、 常 用 属性 、 解 码 
器 和 浏览 器 的 支持 情况 。 


10.1 audio 标签 


目前 ， 大 多 数 是 通过 插件 来 播放 音频 文件 的 ， 例 如 常见 的 播放 插件 为 Flash， 这 就 是 为 什 
么 用 户 在 用 浏览 器 播放 音乐 时 ， 常 常 需要 安装 Flash 插件 的 原因 。 但 是 ， 并 不 是 所 有 的 浏览 器 
都 拥有 同样 的 插件 。 

为 此 ， 和 HTML 4 相 比 ，HTML 5 新 增 了 audio 标签 ， 规 定 了 一 种 包含 音频 的 标准 方法 。 


10.1.1 audio 标签 概述 


audio 标签 是 定义 播放 声音 文件 或 者 音频 流 的 标准 , 支持 三 种 音频 格式 , 分 别 为 Ogg、MP3 
和 Wav。 
如 果 需 要 在 HTML 5 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"> 
</audio> 


0 其 中 src 属性 是 规定 要 播放 的 音频 地 址 ，controls 属性 供 添 加 播放 、 暂 停 和 音量 控 
9 件 用 的 。 
提 示 


另外 ， 在 <audio> 与 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 。 
【 例 10.1】 《实例 文件 : ch10\10.1.html) 


<!DOCTYPE html> 
<html> 
<head> 
<title>audio</title> 
<head> 
<body> 
<audio src="song.mp3" controls="controls"> 


您 的 浏览 器 不 支持 audio 标签 ! 
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</audio> 
</body> 
</html> 


如 果 用 户 的 浏览 器 是 正 9.0 以 前 的 版 本 , 浏览 效果 如 图 10-1 所 示 ， 可 见 IE 9.0 以 前 的 版 
本 浏览 器 不 支持 audio 标签 。 

在 Firefox 8.0 中 浏览 效果 如 图 10-2 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 和 听 到 加 载 的 音频 
文件 。 


b= Ea 3) audio - ozilla Firefox 国 | 回 | 加 
C3 | achiouoln! p - © x|| Gaudio 文件 中 ”编辑 EE) 查看 WD 历史 GG) 书签 @) 工具 C) 
文件 (月 ” 蝙 锡 (E) ”至 看 (V) ”收藏 夫 (A) ”工具 (T) ”帮助 (H) | ndio + 

您 的 浏览 器 不 支持 audio 标 签 ! 


图 10-1 不 支持 audio 标签 的 效果 图 10-2 支持 audio 标签 的 效果 
10.1.2 audio 标签 的 属性 
Audio 标签 的 常见 属性 和 含义 如 表 10-1 所 示 。 


表 10-1 Audio 标签 属性 及 含义 
属性 值 描述 
Autoplay (自动 播放 ) | 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 会 马上 播放 
Controls (控制 ) 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 
loop〔 循 环 ) 如 果 出 现 该 属性 ， 则 每 当 音频 结束 时 将 重新 开始 播放 


Nee es 如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 
如 果 使 用 autoplay， 则 忽略 该 属性 
url (地 址 ) 要 播放 的 音频 的 URL 地 址 
pum | Avtobufier “自动 缓 | 在 网 页 显示 时 ， 访 二 进 制 属性 表示 是 由 用 户 代理 (浏览 器 ) 自动 缓冲 


冲 ) 的 内 容 ， 还 是 由 用 户 使 用 相关 API 进行 内 容 缓冲 


另外 ，audio 标签 可 以 通过 source 属性 添加 多 个 音频 文件 ， 有 具体 格式 如 下 : 


<audio controls="controls"> 

<source src="123.0gg" type="audio/ogg"> 
<source Src="123.mp3" type="audio/mpeg"> 
</audio> 
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10.1.3 ”音频 解码 器 


音频 解码 器 定义 了 音频 数据 流 编 码 和 解码 的 算法 。 其 中 , 编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 。 音 频 播放 器 主要 是 对 音频 文件 进行 解码 ， 然 后 进行 播放 操作 。 目 前 ， 
使 用 较 多 的 音频 解码 器 是 Vorbis 和 ACC。 


10.1.4 浏览 器 对 audio 标签 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 audio 标签 的 支持 也 不 同 。 表 10-2 中 列 出 了 应 用 最 为 广泛 的 浏览 
器 对 audio 标签 的 支持 情况 。 


表 10-2 ”浏览 器 对 audio 标签 的 支持 情况 


浏览 器 | Firefox 3.5 及 | IE 9. ag Opera 10.5 及 | Chrome 3.0 及 | Safari 3.0 及 更 
音频 格式 更 高 版 本 更 高 版 本 更 高 版 本 高 版 本 


EE EE RE 全 
EE 本 


播放 插件 为 Flash。 由 于 不 是 所 有 的 浏览 器 都 拥有 eat 所 以 就 需要 利 统 -的 包含 视 
频 的 标准 方法 。 为 此 ， 和 HTML 4 相 比 ，HTML 5 新 增 了 video 标签 。 


10.2.1 video 标签 概述 


video 标签 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 , 支持 3 种 视频 格式 , 分 别 为 Ogg、 
WebM 和 MPEG 4。 
如 果 需 要 在 HTML 5 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 


<video src="123.mp4" controls="controls"> 
</video> 


， 在 <video > 与 </ video > 之 间 插 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 
0 10.2】“〔 实 例文 件 : ch10\10.2.html) 


<!DOCTYPE html> 
<html> 

<head> 
<title>video</title> 
<head> 

<body> 
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<video src="123.mp4" controls="controls"> 
您 的 浏览 器 不 支持 video 标签 ! 

</video> 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 IE 9.0 以 前 的 版 本 , 浏览 效果 如 图 10-3 所 示 , 可 见 IE 9.0 以 前 的 浏 
览 器 不 支持 video 标签 。 


[ede 


目 要 video 


文件” 编 唱 (6 得 看 (V) ”收藏 关 (A) 工具 (T) 帮助 (H) 


您 的 浏览 器 不 支持 video 标 签 ! 


图 10-3 不 支持 video 标签 的 效果 
在 Firefox 8.0 中 浏览 效果 如 图 10-4 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 “ 播 放 ” 
按钮 ， 即 可 查看 视频 的 内 容 。 


video - Mozilla Firefox 

文件 中 饥 错 于) 查看 WD 历史 G) 书签 @) 工具 YT) 帮助 0 
+ 
l 


图 10-4 支持 video 标签 的 效果 


10.2.2 ”video 标签 的 属性 


video 标签 的 常见 属性 和 含义 如 表 10-3 所 示 。 
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表 10-3 video 标签 属性 及 含义 


属性 值 描述 
autoplay | autoplay | 如 果 出 现 该 属性 ， 则 视频 在 就 绪 后 会 马上 播放 
controls “| 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 


oo 如 果 出 现 该 属性 ， 则 每 当 视 频 结束 时 将 重新 开始 播放 
le 如 果 出 现 该 属性 ， 则 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 ， 
Preload 。 | 如 果 使 用 autoplay， 则 忽略 该 属性 
要 播放 视频 的 URL 


width 宽度 值 设置 视频 播放 器 的 宽度 

height 高 度 值 设置 视频 播放 器 的 高 度 

当 视 频 未 响应 或 缓冲 不 足 时 , 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 定 比 例 被 显 
示 出 来 


poster url 


由 上 表 可 知 , 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例如 想 让 视频 以 320X240 像素 显示 ， 
可 以 加 入 winth 和 height 属性 。 具 体格 式 如 下 : 

<video width="320" height="240" controls src="123.mp4" > 

</video> 

另外 ，video 标签 可 以 通过 source 属性 添加 多 个 视频 文件 ， 具 体格 式 如 下 : 


<video controls="controls"> 

<source src="123.0gg" type="video/ogg"> 
<source src="123.mp4" type="video/mp4"> 
</video> 


10.2.3 ”视频 解码 器 


视频 解码 器 定义 了 视频 数据 流 编码 和 解码 的 算法 。 其 中 , 编码 器 主要 是 对 数据 流 进行 编码 
操作 ， 用 于 存储 和 传输 。 视 频 播放 器 主要 是 对 视频 文件 进行 解码 ， 然 后 进行 播放 操作 。 

目前 ， 在 HTML 5 中 ， 使 用 比较 多 的 视频 解码 文件 是 Theora、H.264 和 VP8。 
10.2.4 浏览 器 对 video 标签 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 video 标签 支持 也 不 同 。 表 10-4 中 列 出 了 应 用 最 为 广泛 的 浏览 器 
对 video 标签 的 支持 情况 。 


表 10-4 浏览 器 对 video 标签 的 支持 


浏览 器 | Firefox 4.0 及 | IE 9.0 及 更 高 | Opera 10.6 及 | Chrome 6.0 及 更 | Safari 3.0 及 更 高 


视频 格式 更 高 版 本 版 本 更 高 版 本 高 版 本 版 本 
Ogg 支持 支持 支持 
MPEG4 | 支持 支持 支持 
WebM 支持 | 支持 支持 
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10.3 ”问题 解答 


1. 在 HTML 5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 8.0 浏览 器 中 正常 播放 ， 为 
什么 ? 

目前 ，HTML 5 的 video 标签 对 视频 的 支持 ， 不 仅仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 的 
限制 。 规 定 如 下 : 


@ 如 果 视 频 是 ogg 格式 的 文件 ， 则 需要 带 有 Thedora 视频 编码 和 Vorbis 音频 编码 的 视 
频 软 件 。 

@ 如 果 视 频 是 MPEG4 格式 的 文件 , 则 需要 带 有 H.264 视频 编码 和 AAC 音频 编码 的 播 
放 软 件 视频 。 

@ 如 果 是 视频 是 WebM 格式 的 文件 , 则 需要 带 有 VP8 视频 编码 和 Vorbis 音频 编码 的 播 
放 软 件 视频 。 


2. 在 HTML 5 网 页 中 添加 MP4 格式 的 视频 文件 , 为 什么 在 不 同 的 浏览 器 中 视频 控件 显示 
的 外 观 不 同 ? 

在 HTML 5 中 规定 controls 属性 用 来 控制 视频 文件 的 播放 、 暂 停 、 停 止 和 调节 音量 的 操作 。 
Controls 是 一 个 布尔 属性 ,一 旦 添加 了 此 属性 ， 等 于 告诉 浏览 器 需要 显示 播放 控件 并 允许 用 户 
操作 。 
因为 每 一 个 浏览 器 负责 内 置 视频 控件 的 外 观 ,所 以 在 不 同 的 浏览 器 中 将 显示 不 同 的 视频 控 
件 外 观 。 


第 11 章 获取 地 理 位 置 


根据 访问 者 访问 网 站 的 方式 ， 有 多 种 获取 地 理 位 置 的 方法 ， 本 章 主要 介绍 如 何 利 上 
Geolocation API 来 获取 地 理 位 置 。 


11.1 用 Geolocation API 获取 地 理 位 置 


在 HTML 5 网 页 代码 中 ， 通 过 一 些 有 用 的 API， 可 以 查找 访问 者 当前 的 位 置 。 
11.1.1 地 理 定位 的 原理 
由 于 访问 者 浏览 网 站 的 方式 不 同 ， 可 以 通过 下 列 方 式 确定 其 位 置 。 
@ 如 果 网 站 浏览 者 使 用 计算 机 上 网 ， 可 通过 获取 浏览 者 的 IP 地 址 确定 其 具体 位 置 。 
@ 如 果 网 站 浏览 者 通过 手机 上 网 ， 可 通过 获取 浏览 者 的 手机 信号 的 接收 塔 确定 其 具体 位 置 。 
@ 如 果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 ， 通 过 获取 GPS 发 出 的 载波 信号 获取 其 具体 
位 置 。 
@@ 如 果 网 站 浏览 者 通过 无 线 上 网 ， 可 以 通过 无 线 网 络 连 接 获 取 其 具体 位 置 。 


API 是 应 用 程序 的 编程 接口 ， 是 一 些 预 先 定义 的 函数 ， 目 的 是 提供 应 用 程序 与 开 
发 人 员 基于 某 软件 或 硬件 的 访问 一 组 例 程 的 能 力 ， 而 又 无 须 访 问 源码 ， 或 理解 内 
提 示 部 工作 机 制 的 细节 。 


11.1.2 ”获取 定位 信息 的 方法 


在 了 解 了 地 理 定位 的 原理 后 , 下面 介绍 获取 定位 信息 的 方法 ,根据 访问 者 访问 网 站 的 方式 ， 
可 以 通过 下 列 方法 之 一 确定 地 理 位 置 。 

@ 利用 IP 地 址 定位 。 

@ 利用 GPS 功能 定位 。 

@ 利用 Wi-fi 定 位 。 

@ 利用 Wi-fi 和 GPRS 联合 定位 。 

@ 利用 用 户 自 定义 定位 数据 定位 。 


使 用 上 述 哪 种 方法 取决 于 浏览 器 和 设备 的 功能 , 然后 , 浏览 器 将 确定 其 位 置 并 传输 回 地 理 
位 置 , 但 需要 注意 的 是 无 法 保证 返回 的 位 置 是 设备 的 实际 地 理 位 置 。 因 为 , 这 涉及 到 隐私 问题 ， 
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并 不 是 每 个 人 都 想 他 人 共享 他 的 位 置 。 

11.1.3 ”常用 地 理 定位 方法 

通过 地 理 定位 ， 可 以 确定 用 户 的 当前 位 置 ,并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ,最 
的 就 是 API 中 的 getCurrentpositong 方法 。 

getCurrentpositong 方法 的 语法 格式 如 下 : 


Void getCurrentPosition(successCallback, errorCallback, options); 


其 中 successCallback 参数 是 指 在 成 功 获取 位 置 时 用 户 想 要 调用 的 函数 名 称 ，errorCallback 参 
数 是 指 在 位 置 获 取 失 败 时 用 户 想 要 调用 的 函数 名 称 ，options 参数 指出 地 理 定位 时 的 属性 设置 。 


E23 


C0’ 访问 用 户 位 置 是 耗 时 的 操作 ， 同 时 出 于 隐私 问题 ， 还 要 取得 用 户 的 同意 。 
提 示 


如 果 地 理 定 位 成 功 ， 新 的 Position 对 象 将 调用 displayOnMap 函数 ， 显 示 设 备 的 当前 位 置 。 
那么 Positon 对 象 的 含义 是 什么 ? 作为 地 理 定位 的 API，Positon 对 象 包含 位 置 确 定时 的 时 
间 锥 (timestamp) 和 包含 位 置 的 坐标 〈coords) ， 具 体 语 法 格式 如 下 : 
Interface position 
{ 
readonly attribute Coordinates cords; 


readonly attribute DOMTimeStamp timestamp; 
Ds 


11.1.4 ”如 何 判 断 浏览 器 是 否 支 持 HTML 5 获取 地 理 位 置信 息 


在 用 户 试 图 使 用 地 理 定位 之 前 ， 应 该 先 确 保 浏览 器 是 否 支 持 HTML 5 获取 地 理 位 置信 息 。 
这 里 介绍 判断 的 方法 。 具 体 的 代码 如 下 : 

function init() 

if (navigator.geolocation) { 

/1 获取 当前 地 理 位 置信 息 

navigator.geolocation.getCurrentPosition(onSuccess, onError, options); 

}else{ 

alert(" 你 的 浏览 器 不 支持 html 5 来 获取 地 理 位 置信 息 。"); 

} 


下 面 解释 该 代码 中 文 函数 的 含义 。 
1.onSuccess 


该 函数 是 获取 当前 位 置信 息 成 功 时 执行 的 回调 函数 。 
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在 onSuccess 回调 函数 中 ,用 到 了 参数 position， 代 表 一 个 具体 的 position 对 象 ， 表 示 当 前 
位 置 。 其 具有 如 下 属性 。 


@ latitude: 当前 地 理 位 置 的 纬度 。 

@ longitude: 当前 地 理 位 置 的 经 度 。 

@ altitude: 当前 位 置 的 海拔 高 度 (不 能 获取 时 为 null )。 

@ accuracy: 获取 到 的 纬度 和 经 度 的 精度 ( 以 m 为 单位 )。 

@ altitudeAccurancy: 获取 到 的 海拔 高 度 的 经 度 ( 以 m 为 单位 )。 

@ heading: 设备 的 前 进 方向 。 以 前 进 方向 为 正方 向 顺 时 针 旋 转角 度 来 表示 (不 能 获取 时 
为 null )。 

@ speed: 设备 的 前 进 速度 (以 m/s 为 单位 ， 不 能 获取 时 为 null )。 

@ timestamp: 获取 地 理 位 置信 息 的 时 间 。 

2. onError 


该 函数 是 获取 当前 位 置信 息 失败 时 所 执行 的 回调 函数 。 
在 onError 回调 函数 中 ， 用 到 了 error 参数 ， 其 具有 如 下 属性 。 
@ code: 错误 代码 ， 有 如 下 值 。 
> 用 户 拒绝 位 置 服务 (属性 值 为 1); 
> 获取 不 到 位 置信 息 ( 属性 值 为 2) ; 
> 获取 信息 超时 错误 ( 属性 值 为 3) 。 
®@ message: 字符 串 ， 包 含 了 具体 的 错误 信息 。 


3. options 
options 是 一 些 可 选 属性 列表 。 在 options 参数 中 ， 可 选 属性 如 下 。 
@ enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 


@ timeout: 设置 超时 时 间 (单位 为 ms )。 
@ maximumAge: 对 地 理 位 置信 息 进行 缓存 的 有 效 时 间 (单位 为 ms )。 


11.1.5 ”指定 纬度 和 经 度 坐标 
对 于 地 理 定位 成 功 后 ， 将 调用 displayOnMap 函数 。 此 函数 如 下 : 


function displayOnMap(position) 

{ 

var latitude=positon.coords.latitude; 
Var longitude=postion.coords.longitude; 
} 


其 中 第 1 行 函数 从 position 对 象 获 取 coordinates 对 象 ， 主 要 由 API 传递 给 程序 调用 。 第 3 
行 和 第 4 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 
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为 了 在 地 图 上 显示 用 户 的 具体 位 置 , 可 以 利用 地 图 网 站 的 API。 下面 以 使 用 百度 地 图 为 例 
进行 讲解 ， 需 要 使 用 Baidu Maps JavaScript API。 在 使 用 此 API 前 ， 需 要 在 HTML 5 页 面 中 添 
加 一 个 引用 ， 有 具体 代码 如 下 : 

<--baidu maps API> 


<script type= “text/JavaScript” scr= “http://api.map.baidu.com/api?key=*&v=1.0&services=true” > 
</script> 


其 中 带 “*?” 号 的 代码 作用 是 注册 到 key。 注 册 key 的 方法 : 在 “http: //openapi.baidu.com/ 
map/index.html” 网 页 中 ,注册 百度 地 图 API 后 ， 输 入 需要 内 置 百度 地 图 页 面 的 URL 地 址 ， 生 
成 API 密 钥 ， 然 后 将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps JavaScript， 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 ， 还 需要 
添加 HTML 语言 ， 然 后 地 图 从 程序 转化 为 对 象 。 还 需要 加 入 以 下 源 代码 : 


<script type="“text/JavaScript"scr="“http://api.map.baidu.com/api?key=*&v=1.0&services=true”> 
</script> 

<div style="width:600px:height:220px;border:1px solid gary;margin-top:15px:" id="container"> 
</div> 

<script type="text/JavaScript"> 

var map = new BMap.Map("container"); 

map.centerAndZoom(new BMap.Point(***,***), 17):; 

map.addControl(new BMap.NavigationControl()); 

map.addControl(new BMap.ScaleControl()); 

map.addControl(new BMap.OverviewMapControl()); 

var local = new BMap.LocalSearch(map, 

1 

enderOptions:{fmap: map} 

1 

); 

local.search(" 输 入 搜索 地 址 "); 

</script> 


上 述 代码 分 析 如 下 : 


(1) 其 中 前 两 行 主要 是 把 baidu map API 程序 植 入 源码 中 。 

(2) 第 3 行 在 页 面 中 设置 一 个 标签 ， 包括 宽度 和 长 度 ， 用 户 可 以 自己 调整 ，border=1px 是 定 
义 外 框 的 宽度 为 1 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 该 标签 的 上 外 边 距 。 

(3) 第 7 行为 在 地 图 中 自己 位 置 的 坐标 。 

(4) 第 8 行 ~ 第 10 行为 植 入 地 图 缩放 控制 工具 。 

(5) 第 11 行 ~ 第 16 行为 地 图 中 自己 的 位 置 ， 只 需 在 local search 后 填 入 自己 的 位 置 名 称 
即 可 。 
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【 例 11.1】《〔 实 例文 件 : ch11\11.1.html) 
如 下 代码 为 使 用 纬度 和 经 度 定 位 坐标 的 案例 。 


旭 和 打开 记事 本 文件 ， 在 其 中 输入 如 下 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 纬 度 和 经 度 坐 标 </title> 
<style> 
body {background-color:#fff;} 
</style> 
</head> 
<body> 
<p id="geo loc"><p> 
<script> 
function getElem(id) { 
return typeof id 一 = 'string' ? document.getElementById(id) : id; 
b 


function show_it(lat, lon) { 
var str = ' 您 当前 的 位 置 ， 纬 度 :' + 1at+'， 经 度 :' + lon; 
getElem('geo loc').innerHTML = str; 
} 
if (navigator.geolocation) 了 
navigator.geolocation.getCurrentPosition(function(position) { 
show_it(position.coords.latitude, position.coords.longitude); 
让 ， 
function(err) { 
getElem('geo_loc').innerHTML = err.code + "|" + err.message; 
D; 
} else { 
getElem('geo_loc').innerHTML = "您 当前 使 用 的 浏览 器 不 支持 Geolocation 服务 "; 
} 
</script> 
</body> 
</html> 


I02] 使 用 Opera 浏览 器 打开 网 页 文件 ， 由 于 使 用 HTML 定位 功能 首先 要 由 用 户 允 许 位 置 


共享 才 可 获取 地 理 位 置信 息 ， 所 以 弹出 如 下 图 所 示 提 示 框 ， 选 择 “ 总 是 允许 ”， 单 击 “ 确 定 ” 
按钮 ， 如 图 11-1 所 示 。 


tQ3j 在 弹出 的 地 理 位 置 共 享 条 款 对 话 框 中 勾 选 “接受 条 款 和 条 件 并 启用 地 理 位 置 ”选项 ， 


并 单 击 “ 接 受 ”按钮 ， 如 图 11-2 所 示 。 
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图 11-1 程序 运行 结果 


The Opera browser ls attempting to access your location using Googles 
location service The service, provided by Google, adds location capabillty 
to applications while using the Opera browser 


By clicking agree below, you agree to Googles Terms of Servce and to the 
collection use, sharing and onward transfer of your location data in 
accordance with Google's Privacy Pollcy 


Leam more 


11-2 程序 运行 结果 


四 弛 在 页 面 中 显示 当前 页 面 打 开 时 所 处 的 地 理 位 置 ,其 位 置 为 使 用 者 的 IP 或 GPS 定位 地 
址 ， 如 图 11-3 所 示 。 


三 


二 字 全 0- | 9 时 二 多 | localhosyHyUsery/ 玄 ] [图 - 人 coog 


您 当前 的 位 置 ， 纬 度 ，34. 7466， 经 度 ，113. 625368 


11-3 程序 运行 结果 
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@! 每 次 使 用 浏览 器 打开 网 页 时 都 会 提醒 是 否 允 许 地 理 位 置 共享 ， 为 了 安全 ， 用 户 应 
当 受 善 使 用 地 址 共享 功能 。 


提 示 
11.2 ”浏览 器 对 地 理 定位 的 支持 情况 
不 同 的 浏览 器 版 本 对 地 理 定位 技术 的 支持 情况 是 不 同 的 ， 表 11-1 是 常见 浏览 器 对 地 理 定 
位 的 支持 情况 。 
表 11-1 常见 浏览 器 对 地 理 定位 的 支持 

浏览 器 名 称 支持 地 理 定位 的 浏览 器 版 本 

IE IE 9.0 及 更 高 版 本 

Firefox Firefox 3.5 及 更 高 版 本 

Opera Opera 10.6 及 更 高 版 本 

Safari Safari 5 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 

Android Android 2.1 及 更 高 版 本 


11.3 ”综合 实例 一 一 在 网 页 中 调用 Google 地 图 


本 实例 介绍 如 何在 网 页 中 调用 Google 地 图 ， 以 获取 当前 设备 物理 地 址 的 经 度 与 纬度 。 具 
体 的 操作 步 又 如 下 : 


0 调用 Google Map， 其 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/JavaScript" sre="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/JavaScript"> 


0g 获取 当前 地 理 位 置 ， 其 代码 如 下 : 


navigator.geolocation.getCurrentPosition(function (position) { 
Var coords = position.coords; 
//console.log(position); 


i@3j 设 定 地 图 参数 ， 其 代码 如 下 : 


var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = { 


zoom: 14, // 设 定 放大 倍数 
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center: lating, /将 地 图 中 心 点 设 定 为 指定 的 坐标 点 
mapTypeld: google.maps.MapTypeld.ROADMAP /指定 地 图 类 型 
B 


io 级 创建 地 图 ， 并 在 页 面 中 显示 ， 其 代码 如 下 : 


var map = new google.maps.Map(document.getElementById("map"), myOptions); 
0g 在 地 图 上 创建 标记 ， 其 代码 如 下 : 


var marker =new google.maps.Marker({ 
position: lating, /将 前 面 设 定 的 坐标 标注 出 来 
map: map /将 该 标注 设置 在 刚才 创建 的 map 中 
DD); 


W086 创建 窗 体内 的 提示 内 容 ， 其 代码 如 下 : 


var infoWindow = new google.maps.InfoWindow( { 
content: "当前 位 置 ，<br/> 经 度 :" + lating.lat() +"<br 户 纬度 :" + lating.Ing0 // 提 示 窗 体内 的 提示 信息 


D); 
3 打开 提示 窗口 ， 其 代码 如 下 : 


infoWindow.open(map, marker); 
上 


08j 根据 需要 再 编写 其 他 相关 代码 ， 如 处 理 错误 的 方法 和 打开 地 图 的 大 小 等 。 查 看 此 时 
页 面相 应 的 HTML 源 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/JavaScript" sre="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/JavaScript"> 

function init() { 

if (navigator.geolocation) { 

/1/ 获 取 当 前 地 理 位 置 

navigator.geolocation.getCurrentPosition(function (position) { 

Var coords = position.coords; 

/l/console.log(position); 

/指定 一 个 Google 地 图 上 的 坐标 点 ， 同 时 指定 该 坐标 点 的 横 坐 标 和 纵 坐 标 
varlatlng = new google.maps.LatLng(coords.latitude, coords.longitude); 

var myOptions = { 

zoom: 14, // 设 定 放大 倍数 

center: lating, // 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeld: google.maps.MapTypeId.ROADMAP /指定 地 图 类 型 
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B; 

// 创 建 地 图 ， 并 在 页 面 map 中 显示 

var map = new google.maps.Map(document.getElementById("map"), myOptions); 
// 在 地 图 上 创建 标记 

var marker = new google.maps.Marker({ 

position: lating, /将 前 面 设 定 的 坐标 标注 出 来 
map: map /将 该 标注 设置 在 刚才 创建 的 map 中 
D); 

// 标 注 提示 窗口 

var infoWindow = new google.maps.InfoWindow({ 
content: "当前 位 置 ， <br> 经 度 : "+ latlng.lat0 + "<br> 维 度 : "+ lating.lngO) // 提 示 窗 体内 的 提示 信息 
DD); 

/打开 提示 窗口 

infoWindow.open(map, marker); 

}, 

function (error) { 

// 处 理 错 误 

switch (error.code) { 

case 1: 

alert(" 位 置 服务 被 拒绝 。"); 

break; 

case 2: 

alert(" 暂 时 获取 不 到 位 置信 息 。"); 

break; 

Case 3: 

alert(" 获 取信 息 超时 。"); 

break:; 

default: 

alert(" 未 知 错误 。"); 

break:; 

b 

»); 

} else 上 

alert(" 你 的 浏览 器 不 支持 HTML 5 来 获取 地 理 位 置信 息 。"); 
} 

b 

</script> 

</head> 

<body onload="initO"> 

<div id="map" style="width: 800px; height: 600px"></div> 
</body> 

</html> 
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to9j 保存 网 页 后 ， 即 可 查看 最 终 效 果 ， 如 图 11-4 所 示 。 
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图 11-4 程序 运行 结果 
11.4 ”问题 解答 


1. 使 用 HTML 5 Geolocation API 获得 的 用 户 地 理 位 置 一 定 精准 吗 ? 
不 一 定 精准 ， 因 为 该 特性 可 能 侵犯 用 户 的 隐私 ,除非 用 户 同意 ,否则 用 户 位 置信 息 是 不 可 
用 的 。 


2. 地 理 位 置 API 可 以 在 国际 空间 站 上 使 用 吗 ? 可 以 在 月 球 上 或 者 其 他 星球 上 用 吗 ? 

地 理 位 置 标准 是 这 样 阐述 的 :， “地理 坐标 参考 系 的 属性 值 来 自 大 地 测量 系统 (World 
Geodetic System (2d) [WGS84]) 。 不 支持 其 他 参考 系 。” 国 际 空间 站 位 于 地 球 轨道 上 ， 所 以 
宇航 员 可 以 使 用 经 纬度 和 海拔 来 描述 其 位 置 。 但是, 大 地 测量 系统 是 以 地 球 为 中 心 的 , 因此 也 
就 不 能 使 用 这 个 系统 来 描述 月 球 或 者 其 他 星球 的 位 置 了 。 


第 12 章 Web 通信 新 技术 


本 章 主要 学 习 Web 通信 新 技术 。 其 中 包括 跨 文档 消息 传输 的 实现 和 Web Sockets 实时 通 
信和 技术 ,通过 本 章 的 学 习 ， 可 以 更 好 地 完成 跨 域 数 据 的 通信 ， 以 及 Web 即时 通信 应 用 的 实现 ， 
如 Web QQ 等 。 


12.1 跨 文 档 消息 传输 


利用 跨 文档 消息 传输 功能 ， 可 以 在 不 同 域 、 端 口 或 网 页 文档 之 间 进 行 消息 的 传递 。 
12.1.1” 跨 文档 消息 传输 的 基本 知识 


利用 跨 文档 消息 传输 可 以 实现 跨 域 的 数据 推送 ， 使 服务 器 端 不 再 被 动 地 等 待 客户 端的 请 
求 ， 只 要 客户 端 与 服务 器 端 建立 了 一 次 连接 后 ， 服 务 器 端 就 可 以 在 需要 的 时 候 ， 主 动 地 将 数据 
推送 到 客户 端 ， 直 到 客户 端 显示 关闭 这 个 连接 。 

HTML 5 提供 了 在 网 页 文档 之 间 互 相 接收 与 发 送 消息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 到 
网 页 所 在 页 面 对 象 的 实例 , 不 仅 同 域 的 Web 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 通信 。 

想 要 接收 从 其 他 的 文档 那里 发 过 来 的 消息 ， 就 必须 对 文档 对 象 的 message 时 间 进 行 监视 ， 
实现 代码 如 下 : 


window.addEventListener(“message”, function(){...}, false)。 


想 要 发 送 消息 ， 可 以 使 用 window 对 象 的 postMessage 方法 来 实现 ， 该 方法 的 实现 代码 如 


otherWindow.postMessage(message，targetOrigin)。 


说 明 : postMessage 是 HTML 5 为 了 解决 跨 文档 通信 ， 特 别 引 入 的 一 个 新 的 API， 目 前 支 
持 这 个 API 的 浏览 器 有 下 (8.0 以 上 ) 、Firefox、Opera、Safari 和 Chrome。 

postMessage 允许 页 面 中 的 多 个 iframe/window 的 通信 ，postMessage 也 可 以 实现 ajax 直接 
跨 域 通信 ， 不 通过 服务 器 端 代 理 。 


12.1.2 ” 跨 文档 通信 应 用 测试 


下 面 介绍 一 个 路 文档 通信 的 应 用 案例 ， 其 中 主要 使 用 postMessage 的 方法 来 实现 该 案例 。 
具体 操作 方法 如 下 : 
需要 创建 两 个 文档 来 实现 跨 文档 的 访问 ， 名 称 分 别 为 12.1.html 和 12.2.html。 


四 打开 记事 本 文件 , 在 其 中 输入 以 下 代码 , 以 创建 用 于 实现 信息 发 送 的 12.1.html 文档 ， 
具体 代码 如 下 : 


面 在 域 中 ， 且 每 过 15 向 12.2.btal 文 档 发 送 一 | 
ee | 


12-1 程序 运行 结果 


to 色 打开 记事 本 文件 , 在 其 中 输入 以 下 代码 ,以 创建 用 于 实现 信息 监听 的 12.2.html 文档 ， 
具体 代码 如 下 : 
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<head> 


<title> 跨 域 文档 通信 2</title> 
<meta charset="utf-8"/> 


</head> 


<script type="text/JavaScript"> 
window.onload = function() { 
var onmessage = function(e) { 
Var data = e.data,p = document.createElement('p"); 
p.innerHTML = data; 
document.getElementById('display').appendChild(p); 


}; 


// 监 听 postMessage 消息 事件 
if (typeof window.addEventListener != "undefined') { 
window.addEventListener('message', onmessage, false); 


} else if (typeof window.attachEvent != "undefined') 了 


window.attachEvent(onmessage', onmessage); 


} 
上 
</script> 
<body> 


<div id="display"></div> 


</body> 
</html> 


运行 效果 如 图 12-2 所 示 。 


[ETSJIES 
8B) HAsersAdminist P - © x | 居 尘 文 全 覃 人 2 
Ez 淆 纺 (E) 查看 (V) ”收藏 (A) Im 项 助 (H) 
页 面 在 域 中 ， 且 每 过 1s 向 12. 1. html 文 档 发 送 一 个 消 


图 12-2 程序 运行 结果 


在 12.1.html 文件 中 的 “window.parent.frames[0].postMessage (message, *') ;” 语 句 中 的 “*” 
号 表示 不 对 访问 的 域 进行 判断 。 如 果 要 加 入 特定 域 的 限制 ， 可 以 将 代码 改 为 “window.parent. 
frames[0].postMessage (message, "url') ;” 其 中 的 url 必须 为 完整 的 网 站 域名 格式 。 而 在 信息 监 


听 接 收 方 的 onmessage 叶 


hb 需 要 追加 一 个 判断 语句 “if (event.origin !== "url') return;”。 
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C7 由 于 在 实际 通信 时 ， 应 当 实 现 双 向 的 通信 ， 所 以 ， 在 编写 代码 时 ， 每 一 个 文档 中 
提示 都 应 该 具有 发 送信 息 和 监听 接收 信息 的 模块 。 
人 


12.2 Web Sockets API 


HTML 5 中 有 一 个 很 实用 的 新 特性 : WebSockets。 使 用 WebSockets 可 以 在 没有 Ajax 请 求 
的 情况 下 与 服务 器 端 对 话 。 


12.2.1 什么 是 WebSocket API 


WebSocket API 是 下 一 代 客 户 端 -服务 器 的 异步 通信 方法 。 该 通信 取代 了 单个 的 TCP 套 接 
字 ， 使 用 ws 或 wss 协议 ， 可 用 于 任意 的 客户 端 和 服务 器 程序 。WebSocket 目前 由 W3C 进行 
标准 化 。WebSocket 已 经 得 到 Firefox 4、Chrome 4、Opera 10.70 以 及 Safari 5 等 浏览 器 的 支持 。 

WebSocket API 设计 的 最 好 之 处 在 于 服务 器 和 客户 端 可 以 在 给 定时 间 范 围 内 的 任意 时 刻 ， 
相互 推送 信息 。WebSocket 并 不 限于 以 Ajax (或 XHR) 方式 通信 ， 因 为 Ajax 技术 需要 由 客户 
端 发 起 请 求 ， 而 WebSocket 服务 器 和 客户 端 可 以 彼此 相互 推送 信息 ; XHR 受到 域 的 限制 ， 而 
WebSocket 允许 跨 域 通信 。 

Ajax 技术 的 一 点 是 没有 设计 要 使 用 的 方式 。WebSocket 为 指定 目标 创建 ， 用 于 双向 推送 


12.2.2 ”Web Sockets 通信 基础 
1. 产生 Web Sockets 的 背景 


随 之 即时 通信 系统 的 普及 ， 基 于 Web 的 实时 通信 也 变 得 普及 ， 如 新 浪 微 博 的 评论 、 私 信 
的 通知 ， 腾 讯 的 Web QQ 等 ， 如 图 12-3 所 示 。 


图 12-3 腾讯 Web QQ 页 面 
在 Web Socket 出 现 之 前 ， 一 般 通 过 两 种 方式 来 实现 Web 实时 应 用 : 轮 询 机 制 和 流 技术 ， 
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而 其 中 的 轮 询 机 制 又 可 分 为 普通 轮 询 和 长 轮 询 (Coment) ， 分 别 介绍 如 下 : 


@ 轮 询 : 这 是 最 早 的 一 种 实现 实时 Web 应 用 的 方案 。 客户 端 以 一 定 的 时 间 间 隔 向 服务 端 
发 出 请 求 ， 以 频繁 请 求 的 方式 来 保持 客户 端 和 服务 器 端的 同步 。 这 种 同步 方案 的 缺点 
是 ， 当 客户 端 以 国定 频率 向 服务 器 发 起 请 求 的 时 候 ,服务 器 端的 数据 可 能 并 没有 更 新 ， 
这 样 会 带 来 很 多 无 谓 的 网 络 传输 ， 所 以 这 是 一 种 非常 低 效 的 实时 方案 。 

@ 长 轮 询 : 是 对 定时 轮 询 的 改进 和 提高 ， 目 地 是 为 了 降低 无 效 的 网 络 传输 。 当 服务 器 端 
没有 数据 更 新 的 时 候 ， 连 接 会 保持 一 段 时 间 直 到 数据 或 状态 改变 或 者 时 间 过 期 ， 通 过 
用 这 种 机 制 来 减少 无 效 的 客户 端 和 服务 器 间 的 交互 。 当 然 ， 如 果 服 务 端的 数据 变更 非 
常 频繁 的 话 ， 这 种 机 制 和 定时 轮 询 比较 起 来 没有 本 质 上 的 性 能 的 提高 。 

@ 流 : 就 是 在 客户 端的 页 面 使 用 一 个 隐藏 的 窗口 向 服务 端 发 出 一 个 长 连接 的 请 求 。 服 务 
器 端 接 到 这 个 请 求 后 作出 回应 并 不 断 更 新 连接 状态 以 保证 客户 端 和 服务 器 端的 连接 不 
过 期 。 通 过 这 种 机 制 可 以 将 服务 器 端的 信息 源源 不 断 地 推 向 客户 端 。 这 种 机 制 在 用 户 
体验 上 有 一 点 问题 ， 需 要 针对 不 同 的 浏览 器 设计 不 同 的 方案 来 改进 用 户 体验 ， 同 时 这 
种 机 制 在 并 发 比较 大 的 情况 下 ， 对 服务 器 端的 资源 是 一 个 极 大 的 考验 。 


但 是 上 述 3 种 方式 实际 看 来 都 不 是 真实 的 实时 通信 技术 ， 只 是 相对 地 模拟 出 实时 的 效果 ， 
这 种 效果 的 实现 对 于 编程 人 员 来 说 无 疑 增 加 了 复杂 性 ,对 于 客户 端 和 服务 器 端的 实现 都 需要 复 
杂 的 HTTP 链接 设计 来 模拟 双向 的 实时 通信 。 这 种 复杂 的 实现 方法 制约 了 应 用 系统 的 扩展 性 。 

基于 上 述 浆 端 , 在 HTML 5 中 增加 了 实现 Web 实时 应 用 的 技术 : Web Socket。Web Socket 
通过 浏览 器 提供 的 API 真正 实现 了 具备 像 C/S 架构 下 的 桌面 系统 的 实时 通信 能 力 。 其 原理 是 
使 用 JavaScript 调用 浏览 器 的 API，API 发 出 一 个 WebSocket 请 求 至 服务 器 ， 经 过 一 次 握手 和 
服务 器 建立 了 TCP 通信 ， 因 为 它 本 质 上 是 一 个 TCP 连接 ， 所 以 数据 传输 的 稳定 性 强 和 数据 传 
输 量 小 。 由 于 HTML 5 中 WebSockets 的 实用 性 ， 使 其 具备 了 Web TCP 的 称号 。 


2. WebSocket 技术 的 实现 方法 
WebSocket 技术 本 质 上 是 一 个 基于 TCP 的 协议 技术 。 其 建立 通信 链接 的 操作 步骤 如 下 : 


0 为 了 建立 一 个 WebSocket 连接 ， 客 户 端的 浏览 器 首先 要 向 服务 器 发 起 一 个 HTTP 
请 求 ， 这 个 请 求 和 通常 的 HTTP 请 求 有 所 差异 ， 除 了 包含 一 般 的 头 信息 外 ， 还 有 一 个 附加 的 
信息 “Upgrade: WebSocket”， 表 明 这 是 一 个 申请 协议 升级 的 HTTP 请 求 。 

MO3 服务 器 端 解析 这 些 附 加 的 头 信息 ， 经 过 验证 后 ， 产 生 应 答 信息 返回 给 客户 端 。 

to3j 客户 端 接收 返回 的 应 答 信息 ， 建 立 与 服务 器 端的 WebSocket 连接 ， 之 后 双方 即 可 通 
过 该 连接 通道 自由 地 传递 信息 ,并 且 这 个 连接 会 持续 存在 直到 客户 端 或 者 服务 器 端的 某 一 方 主 
动 的 关闭 连接 。 

WebSocket 技术 ， 目 前 还 是 属于 比较 新 的 技术 ， 其 版 本 更 新 较 快 ， 目 前 的 最 新 版 本 基本 上 
可 以 被 Chrome、FireFox、Opera 和 IE 〈9.0 以 上 ) 等 浏览 器 支持 。 

在 建立 实时 通信 时 ， 客 户 端 发 到 服务 器 的 内 容 如 下 : 


BR 
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GET /chat HTTP/1.1 

Host: server.example.com 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== 

Origin: http://example.com 

Sec-WebSocket-Protocol: chat, superchat8.Sec-WebSocket-Version: 13 


从 服务 器 返回 到 客户 端的 内 容 如 下 : 


HTTP/1.1 101 Switching Protocols 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Accept: s3pPPLMBiTxaQ9k YGzzhZRbK+xOo= 
Sec-WebSocket-Protocol: chat 


0 其 中 的 “Upgrade:websocket” 表 示 这 是 一 个 特殊 的 HTTP 请 求 ， 请求 的 目的 就 是 
于 要 将 客户 端 和 服务 器 端的 通信 协议 从 HTTP 协议 升级 到 WebSocket 协议 。 其 中 
提 示 客户 端的 Sec-WebSocket-Key 和 服务 器 端的 Sec-WebSocket-Accept 就 是 重要 的 握 
手 认 证 信息 ， 实 现 握手 后 才 可 以 进一步 地 进行 信息 的 发 送 和 接收 。 


12.2.3 在 服务 器 端 使 用 Web Sockets API 


在 实现 Web Sockets 实时 通信 时 ， 需 要 使 客户 端 和 服务 器 端 建立 链接 ， 需 要 配置 相应 的 内 
容 , 一 般 构 建 链接 握手 时 , 客户 端的 内 容 浏览 器 都 可 以 代劳 完成 ， 主 要 实现 的 是 服务 器 端的 内 
容 ， 下 面 看 一 下 Web Sockets API 的 具体 使 用 方法 。 

服务 器 端 需要 编程 人 员 自 己 来 实现 , 目前 市 场 上 可 直接 使 用 的 开源 方法 比较 多 , 主要 有 以 
下 5 种 。 

@@ Kaazing WebSocket Gateway: 是 用 Java 实现 的 WebSocket Server; 
mod_pywebsocket: 是 用 Python 实现 的 WebSocket Server; 
Netty: 是 用 Java 实现 的 网 络 框架 ， 其 中 包括 对 WebSocket 的 支持 ; 
node.js: 是 用 Server 端的 JavaScript 框架 ， 提 供 对 WebSocket 的 支持 ; 


2 
[2 
@ 
@ WebSocket4Net: 是 .net 的 服务 器 端的 实现 。 


除了 使 用 以 上 开源 方法 外 , 程序 员 编 写 简单 的 服务 器 端 也 是 可 以 的 。 其 中 服务 器 端 需要 实 
现 握手 、 接 收 和 发 送 3 个 内 容 。 

下 面 详细 介绍 操作 方法 。 

1. 握手 

在 实现 握手 时 需要 通过 Sec-WebSocket 信息 来 验证 。 使 用 Sec-WebSocket-Key 和 一 个 随机 
值 构 成 一 个 新 的 key 串 ， 然 后 将 新 的 key 串 进行 SHA1 编码 ， 生 成 一 个 由 多 组 两 位 16 进 制 数 
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构成 的 加 密 串 ;最 后 再 把 加 密 串 进行 base64 编码 生成 最 终 的 key, 这 个 key 就 是 Sec-WebSocket- 
Accept。 
实现 Sec-WebSocket-Key 运算 的 实例 代码 如 下 : 


/<summary> 
1/ 生成 Sec-WebSocket-Accept 
/W/</summary> 
///<param name="handShakeText"> 客 户 端 握手 信息 </param> 
///<returns>Sec-WebSocket-Accept</returns> 
Private static string GetSecKeyAccetp(byte[] handShakeBytes,int bytesLength) 
1 
string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength); 
string key = string.Empty; 
Regexr=new Regex((@"Sec\-WebSocket\-Key:(.*?)\rn"); 
Match m= r.Match(handShakeText); 
if (m.Groups.Count != 0) 
key = Regex.Replace(m.Value, (@"Sec\-WebSocket\-Key:(.*?)n\n", "$1").Trim(); 
b 
byte[] encryptionString = SHAI1.Create().ComputeHash(Encoding.ASCII.GetBytes(key 让 
"258EAFAS-E914-47DA-95CA-C5ABODC85B11")); 
return Convert.ToBase64String(encryptionString); 
} 


2. 接收 

如 果 握 手 成 功 ， 将 会 触发 客户 端的 onopen 事件 ， 进 而 解析 接收 的 客户 端 信息 。 在 进行 数 
据 信 息 解 析 时 ， 会 将 数据 以 字 节 和 比特 的 方式 拆 分 ， 并 按照 以 下 规则 进行 解析 。 

(1) 第 一 字 节 。 


@ 第 一 位 : frame-fin，x0 表示 该 message 后 续 还 有 frame; xl 表示 是 message 的 最 后 一 
个 frame。 

@ 第 二 位 ~ 第 三 位 : 分 别 是 frame-rsv1、frame-rsv2 和 frame-rsv3， 通 常 都 是 x0。 

@ 第 四 位 : frame-opcode, x0 表示 是 延续 frame, xl 表示 文本 frame, x2 表示 二 进 制 frame， 
X3~x7 保留 给 非 控制 fame，x8 表示 关闭 连接 ，x9 表示 ping，xA 表示 pong，xB~xF 
保留 给 控制 frame。 


(2) 第 二 字 节 。 


@ 第 一 位 : Mask，1 表示 该 frame 包含 掩 码 ; 0 表示 无 掩 码 。 

@ 第 七 位 、 第 七 字 节 和 第 二 字 节 、 第 七 位 和 第 八字 节 : 第 七 位 取 整 数值 ， 若 在 0~125 之 
间 ， 则 是 负载 数据 长 度 ; 若是 126， 表 示 后 两 个 字 节 取 无 符号 16 位 整数 值 ， 是 负载 长 
度 ; 127 表示 后 8 个 字 节 ， 取 64 位 无 符号 整数 值 ， 是 负载 长 度 。 
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(3) 第 三 字 节 ~ 第 六 字 节 : 这 里 假定 负载 长 度 在 0~125 之 间 ， 并 且 Mask 为 1， 则 这 4 个 
字 节 是 掩 码 。 

(4) 第 七 字 节 和 最 后 一 个 字 节 : 长 度 是 上 面 取 出 的 负载 长 度 ， 包 括 扩 展 数 据 和 应 用 数据 
两 部 分 ， 通 常 没 有 扩展 数据 ; 若 Mask 为 1， 则 此 数据 需要 解码 ， 解 码 规则 为 1B~4B 掩 码 循环 
和 数据 字 节 做 异 或 操作 。 

实现 数据 解析 的 代码 如 下 : 


/W/<summary> 
/1/ 解析 客户 端 数据 包 
</summary> 
/1//<param name="recBytes"> 服 务 器 接收 的 数据 包 </param> 
/1//<param name="recByteLength"> 有 效 数据 长 度 </param> 
///<returns></returns> 
private static string AnalyticData(byte[] recBytes, int recByteLength) 
{ 
if (recByteLength< 2) { return string.Empty; } 
bool fin = (recBytes[0] & 0x80) == 0x80; // 1bit，1 表示 最 后 一 帧 
让 (Ifin)f 
return string.Empty;// 超过 一 帧 暂 不 处 理 
上 
bool mask_flag = (recBytes[1] & 0x80) 一 0x80; / 是 否 包 含 掩 码 
if (Imask flag){ 
return string.Empty;// 不 包含 掩 码 的 暂 不 处 理 
} 
int payload_len = recBytes[1] & 0x7F; // 数据 长 度 
byte[] masks = new byte[4]; 
byte[] payload_data; 
让 (payload len == 126){ 
Array.Copy(recBytes, 4, masks, 0, 4); 
payload len = (UIntl6)(recBytes[2]<< 8 | recBytes[31); 
payload data = new byte[payload len]; 
Array.Copy(recBytes, 8, payload data, 0, payload len); 
}else if (payload len 一 127){ 
Array.Copy(recBytes, 10, masks, 0, 4); 
byte[] ulInt64Bytes = new byte[8]; 
for (int i= 0; i< 8; i++){ 
ulnt64Bytes[i] = recBytes[9 - i]; 
} 
UInt64 len = BitConverter.ToUInt64(uInt64Bytes, 0); 
payload data = new byte[len]; 
for (UInt64 i= 0; i< len; i++){ 
payload datali] = recBytes[i + 14]; 


HTMmL 5 从 零 开 始 学 〈 视 频 教学 版 ) 


Yelsef 
Array.Copy(recBytes, 2, masks, 0, 4); 
payload data = new byte[payload len]; 
Array.Copy(recBytes, 6, payload data, 0, payload len); 
} 
for (var i= 0; i< payload len; i++)f 
payload datali] = (byte)(payload data[i] ^ masks[i % 4]); 
} 
return Encoding.UTF8.GetString(payload data);56.} 


3. 发 送 数据 

服务 器 端 接收 并 解析 了 客户 端 发 来 的 信息 后 ， 要 返回 相应 的 信息 ， 服 务 器 发 送 的 数据 以 
0x81 开头 ， 紧 接 发 送 内 容 的 长 度 ， 最 后 是 内 容 的 byte 数组 。 

实现 数据 发 送 的 代码 如 下 : 


W/<summary> 
1/ 打包 服务 器 数据 
/</summary> 
1//<param name="message"> 数 据 </param> 
1/<returns> 数 据 包 </returns> 
private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null; 
byte[] temp = Encoding.UTF8.GetBytes(message); 
if (temp.Length< 126){ 
contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = Ox81; 
contentBytes[1] = (byte)temp.Length; 
Array.Copy(temp, 0, contentBytes, 2, temp.Length); 
}else if (temp.Length< OxFFFF):{ 
contentBytes = new byte[temp.Length + 4]; 
contentBytes[0] = 0x81; 
contentBytes[1] = 126; 
contentBytes[2] = (byte)(temp.Length & OxFF); 
contentBytes[3] = (byte)(temp.Length >>8 & OxFF); 
Array.Copy(temp, 0, contentBytes, 4, temp.Length); 
}else{ 
// 暂 不 处 理 超 长 内 容 
} 
return contentBytes; 
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12.2.4 在 客户 端 使 用 Web Sockets API 


来 调 


置 的 


浏览 器 提供 的 API 就 可 以 直接 用 来 实现 客户 端的 握手 操作 ， 在 应 用 时 直接 使 用 JavaScript 


即 可 。 
在 客户 端 调用 浏览 器 API， 实 现 握 手 操作 的 JavaScript 代码 如 下 : 
Var wsServer = 'ws://localhost:8888/Demo'; // 服 务 器 地 址 
var websocket = new WebSocket(wsServer); // 创 建 WebSocket 对 象 
websocket.send("hello"); /向 服务 器 发 送 消息 
alert(websocketreadyState); // 查 看 WebSocket 当前 状态 
websocket.onopen = function (evt) { // 已 经 建立 连接 
IB 
websocket.onclose = function (evt) { // 已 经 关闭 连接 
}; 
websocket.onmessage = function (evt) { // 收 到 服务 器 消息 ， 使 用 evt.data 提取 
号 
websocket.onerror = function (evb { // 产 生 异 常 


}; 
12.3 ”综合 实例 一 一 编写 简单 的 Web Socket 服务 器 


在 12.2 节 中 介绍 了 Web Socket API 的 原理 及 基本 使 用 方法 ， 提 到 在 实现 通信 时 关键 要 配 
是 Web Socket 服务 器 ， 下 面 就 来 介绍 一 个 简单 的 Web Socket 服务 器 编写 方法 。 
为 了 实现 操作 ， 这 里 配合 编写 一 个 客户 端 文件 ， 以 测试 服务 器 的 实现 效果 。 


to 首先 编写 客户 端 文件 ， 效 果 如 图 12-4 所 示 。 其 文件 代码 如 下 : 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Web sockets test</title> 
<script src="jquery-min.js" type="text/JavaScript"></script> 
<script type="text/JavaScript"> 
Var Ws; 
function ToggleConnectionClicked() { 
try{ 
ws= new WebSocket("ws://192.168.1.101:1818/chat");// 连 接 服务 器 
ws.onopen = function(event){alert(" 已 经 与 服务 器 建立 了 连接 \r\n 当前 连接 状态 : "+this.readyState);}; 
ws.onmessage = function(event){alert(" 接 收 到 服务 器 发 送 的 数据 : \r\n"+event.data);}; 
ws.onclose = function(event){alert(" 已 经 与 服务 器 断 开 连 接 \r\n 当前 连接 状态 : "+this.readyState);}; 
ws.onerror = function(event) {alert("WebSocket 异常 ! ");}; 
} catch (ex) { 
alert(ex.message); 


[一 与 地 秀 要 建立 这 撤 | 


[到 芋 情 总 : 我 的 名 字 是 jae 


图 12-4 程序 运行 结果 
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其 中 ws.onopen、ws.onmessage、ws.onclose 和 Ws.onerror 对 应 了 4 种 状态 的 提示 
信息 。 在 连接 服务 器 时 ， 需 要 在 代码 中 指定 服务 器 的 链接 地 址 ， 测 试 时 将 JP 地 址 
提 示 改 为 本 机 了 配 即 可 。 


tQ2 服务 器 程序 可 以 使 用 .NET 等 实现 编辑 ， 编 辑 后 服务 器 端的 主 程序 代码 如 下 : 


using System; 
using System.Net; 
using System.Net.Sockets; 
using System.Security.Cryptography; 
using System.Text; 
using System.Text.RegularExpressions; 
namespace WebSocket 
{ 
class Program 
{ 
static void Main(string[] args) 
{ 
int port = 2828; 
byte[] buffer = new byte[1024]; 
IPEndPoint localEP = new IPEndPoint(IPAddress.Any, port); 
Socket listener = new Socket(localEP.Address.AddressFamily,SocketType.Stream, 
ProtocolType.Tcp); 
try{ 
listener.Bind(localEP); 
listener.Listen(10); 
Console.WriteLine(" 等 待 客户 端 连接 …"); 
Socket sc = listener.Accept();// 接 受 一 个 连接 
Console.WriteLine(" 接 受到 了 客户 端 "+sc.RemoteEndPoint.ToString(+" 连 接 …"); 
/握手 
int length = sc.Receive(buffer);// 接 受 客户 端 握 手 信息 
sc.Send(PackHandShakeData(GetSecKeyAccetp(buffer,length))); 
Console.WriteLine(" 已 经 发 送 握手 协议 了 …"); 
/接受 客户 端 数据 
Console .WriteLine(" 等 待 客户 端 数据 …"); 
length = sc.Receive(buffer);// 接 受 客户 端 信息 
string clientMsg=AnalyticData(buffer, length): 
Console.WriteLine(" 接 受到 客户 端 数 据 :" + clientMsg); 
// 发 送 数 据 
string sendMsg = "您 好 ，" + clientMsg; 
Console .WriteLine(" 发 送 数据 : “"+sendMsg+"” 至 客户 端 …"); 
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sc.Send(PackData(sendMsg)); 
Console.WriteLine(" 演 示 Over!"); 
catch (Exception e) 
图 
Console. WriteLine(e.ToString()); 


/W/<summary> 
1/ 打包 服务 器 数据 
l//</summary> 
1//<param name="message"> 数 据 </param> 
1/<returns> 数 据 包 </returns> 
Private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null; 
byte[] temp = Encoding.UTF8.GetBytes(message); 
if (temp.Length< 126){ 
contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = 0x81; 
contentBytes[1] = (byte)temp.Length; 
Array.Copy(temp, 0, contentBytes, 2, temp.Length); 
}else if (temp.Length< OxFFFF)!{ 
contentBytes = new byte[temp.Length + 4]; 
contentBytes[0] = 0x81; 
contentBytes[1] = 126; 
contentBytes[2] = (byte)(temp.Length & OxFF); 
contentBytes[3] = (byte)(temp.Length >>8 & OxFF); 
Array.Copy(temp, 0, contentBytes, 4, temp.Length); 
jelsef 
/ 暂 不 处 理 超 长 内 容 
上 
return contentBytes; 


于 内 容 较 多 ， 这 里 把 中 间 部 分 内 容 省 略 ， 编 辑 后 保存 到 服务 器 文件 目录 。 
I03| 测试 服务 器 和 客户 端的 链接 通信 ， 首 先 打开 服务 器 ， 和 运行 软件 包 中 的 “素材 
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\ch12\12.3\WebSocket-Server\WebSocket\objx86\Debug\WebSocket.exe” 文 件 ， 提 示 等 待 客户 端 


链接 ， 效 果 如 图 12-5 所 示 。 
0 绚 运行 客户 端 文件 ( 软件 包 位 置 : 素材 ch12\12.3\WebSocket-Clientindex.html ) ， 效 果 


如 图 12-6 所 示 。 


opers J ELE 
hapy/vwwopera- x | D Web sockets test 西 忌 
已 天 二 地 | localhost/ 广 || 图 -使 用 Gc 
与 服务 器 树 接 ] 
[ 发送 我 的 名 字 : beston 
查看 杖 态 
器 eo ~ 
图 12-5 程序 运行 结果 图 12-6 程序 运行 结果 


5) 单 击 “ 与 服务 器 建立 连接 ”按钮 ， 服务 器 端 显示 已 经 建立 链接 ， 客 户 端 提示 连接 建 
立 ， 且 状态 为 1， 效 果 如 图 12-7 所 示 。 


Tavaseriet 
Qocalhest 


已 经 与 服务 器 建立 了 连接 
当前 连接 状态 : 1 


口 停止 执行 此 页 面 中 的 脚本 


图 12-7 程序 运行 结果 


IQ6| 单 击 “ 发 送 消息 ”按钮 ， 自 服务 器 端 返回 信息 ， 提 示 “ 您 好 ，jane”， 如 图 12-8 所 


示 。 
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TavaSerint 
localhost> 


接收 到 服务 器 发 送 的 数据 : 
悠 好 ，jane 


口 停止 执行 此 页 面 中 的 脚本 


图 12-8 程序 运行 结果 
12.4 ”问题 解答 


1. WebSockets 能 奉 代 什么 ? 

WebSockets 可 以 替代 Long Polling (PHP 服务 端 推送 技术 ) 。 客 户 端 发 送 一 个 请 求 到 服务 
器 , 服务 器 端 并 不 会 响应 还 没准 备 好 的 数据 , 它 会 保持 连接 的 打开 状态 直到 最 新 的 数据 准备 就 
绪 再 发 送 ， 之 后 客户 端 收 到 数据 ， 然 后 发 送 另 一 个 请 求 。 好 处 在 于 减少 任 一 连接 的 延迟 ， 当 一 
个 连接 已 经 打开 时 就 不 需要 创建 男 一 个 新 的 连接 了 。 但 是 Long-Polling 并 不 是 什么 花 俏 技术 ， 
仍 有 可 能 发 生 请 求 暂停 ， 因 此 会 需要 建立 新 的 连接 。 


2. WebSocket 的 优势 在 哪里 ? 

它 可 以 实现 真正 的 实时 数据 通信 。B/S 模式 下 应 用 的 是 HTTP 协议 ， 是 无 状态 的 ， 所 以 不 
能 保持 持续 的 连接 。 数据 交换 是 通过 客户 端 提交 请 求 到 服务 器 端 , 然后 服务 器 端 返回 一 个 应 答 
到 客户 端 来 实现 的 ,而 WebSocket 是 通过 HTTP 协议 的 初始 握手 阶段 , 然后 升级 到 Web Socket 
协议 以 支持 实时 数据 通信 。 

WebSocket 可 以 支持 服务 器 主动 向 客户 端 推送 数据 。 一 旦 服务 器 和 客户 端 通过 WebSocket 
建立 起 连接 ， 服 务 器 便 可 以 主动 向 客户 端 推送 数据 ， 而 不 像 普通 的 Web 传输 方式 需要 先 由 客 
户 端 发 送 请 求 才能 返回 数据 ， 从 而 增强 了 服务 器 的 能 力 。 

WebSocket 协议 设计 了 更 为 轻 量 级 的 Header， 除 了 首次 建立 连接 时 需要 发 送 头 部 和 普通 
Web 连接 类 似 的 数据 之 外 ， 建 立 WebSocket 连接 后 ， 相 互 沟通 的 Header 就 会 异常 的 简洁 ， 大 
大 减少 了 元 余 的 数据 传输 。 

WebSocket 提供 了 更 为 强大 的 通信 能 力 和 更 为 简洁 的 数据 传输 平台 ， 能 更 为 方便 地 完成 
Web 开发 中 的 双向 通信 功能 。 
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Web Storage 是 HTML 5 引入 的 一 项 非常 重要 的 功能 ， 可 以 在 客户 端 本 地 存储 数据 ， 类 似 
HTML 4 的 Cookie， 但 可 实现 功能 要 比 Cookie 强大 得 多 ，Cookie 大 小 被 限制 为 4KB，Web 
Storage 官方 建议 为 每 个 网 站 SMB 。 


13.1 认识 Web 存储 


在 HTML 5 标准 之 前 ，Web 存储 信息 需要 Cookie 来 完成 , 但 是 Cookie 不 适合 大 量 数据 的 
存储 情况 ， 因 为 数据 是 靠 对 服务 器 的 请 求 来 传递 的 , 这 使 得 Cookie 速度 很 慢 而 且 效 率 也 不 高 。 
为 此 ， 在 HTML 5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信息 做 了 数据 标 
13.3.1 本 地 存储 和 Cookie 的 区 别 

本 地 存储 和 Cookie 扮演 着 类 似 的 角色 ， 但 是 它们 有 根本 的 区 别 。 


@ 本 地 存储 仅 将 数据 存储 在 用 户 的 硬盘 上 ,等 待 用 户 读 取 ， 而 Cookie 将 数据 存储 在 服务 
器 上 。 

@ 本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 根据 存储 数值 做 出 反映 ， 就 应 该 使 用 
Cookie。 

@@ 读 取 本 地 存储 不 会 影响 到 网 络 带宽 , 但 是 使 用 Cookie 将 会 发 送 数据 到 服务 器 ,这 样 会 
影响 到 网 络 带宽 ， 无 形 中 增加 了 成 本 。 

@ 从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 5MB 的 数据 ,而 Cookie 最 多 只 能 存储 4KB 的 
数据 信息 。 


13.3.2 ”Web 存储 方法 
在 HTML 5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存储 数据 的 新 方法 。 
@ sessionStorage: 基于 session 的 数据 存储 ， 在 关闭 或 者 离开 网 站 后 ， 数 据 将 会 被 删除 ， 
也 被 称 为 会 话 存储 。 
@ localStorage: 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 。 
与 会 话 存 储 不 用 , 本 地 存储 将 在 用 户 计算 机 上 永久 保持 数据 信息 。 关 闭 浏览 器 窗口 后 , 如 
果 再 次 打开 该 站 点 ， 可 以 检索 所 有 存储 在 本 地 的 数据 。 
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在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 
的 话 ， 存 储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 网 
站 只 能 访问 其 自身 的 数据 。 


0 HTML 5 使 用 JavaScript 来 存储 和 访问 数据 ， 为 此 ， 建 议 用 户 多 了 解 JavaScript 的 
基本 知识 。 


提 示 
13.2 HTML 5 Web Storage API 


使 用 HTML 5 Web Storage API 技术 ， 可 以 很 好 地 实现 本 地 存储 。 
13.2.1 测试 浏览 器 的 支持 情况 

Web Storage 在 各 大 主流 浏览 器 中 都 被 支持 ， 但 是 为 了 兼容 老 版 浏览 器 ， 还 是 要 检查 一 下 
是 否 可 以 使 用 这 项 技术 ， 主 要 有 两 种 方法 。 

1. 通过 检查 Storage 对 象 来 判断 

第 一 种 方式 是 通过 检查 Storage 对 象 是 否 存 在 来 检查 浏览 器 是 否 支持 Web Storage, 代码 如 下 : 


if(typeof(Storage)!=="undefined"){ 

/ Yes! localStorage and sessionStorage support! 
// Some code..... 

} else { 

// Sorry! No web storage support.. 

} 


2. 分 别 检查 各 自 的 对 象 
第 二 种 方式 就 是 分 别 检 查 各 自 的 对 象 ， 例 如 检查 localStorage 是 否 支 持 ， 代 码 如 下 : 


让 (typeoflocalStorage) == "undefined' ) { 

alert('Y our browser does not support html 5 localStorage. Try upgrading.); 
} else 上 

// Yes! localStorage and sessionStorage support! 

/ Some code..... 

} 

或 者 : 

if('localStorage' in window && window['localStorage'] !== nulD){ 

// Yes! localStorage and sessionStorage support! 


}elsef 
alert('Y our browser does not support html $ localStorage. Try upgrading."); 
} 
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或 者 
if (!!localStorage) { 
// Yes! localStorage and sessionStorage support! 


}elsef 
alert('Y our browser does not support html 5 localStorage. Try upgrading."); 
} 


13.2.2 sessionStorage 方法 

SessionStorage 方法 针对 session 进行 数据 存储 。 如 果 用 户 关 闭 浏览 器 窗口 后 ， 数 据 会 被 自 
动 删 除 。 

创建 sessionStorage 方法 的 基本 语法 格式 如 下 : 


<script type="text/JavaScript"> 
sessionStorage.abc=" "; 
</script> 

1. 创建 对 象 


【 例 13.1】“《 实 例文 件 ，ch13\13.1.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 
sessionStorage.name=" 我 们 的 公司 是 : 英 达 科技 文化 公司 "; 
document.write(sessionStorage.name); 

</script> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 13-1 所 示 , 即 可 看 到 sessionStorage 方法 创建 的 对 象 内 容 显 示 在 
网 页 中 。 


~ [een 
区 2 ee) chlolelhml Pp- © x| Bo\chious1 
文件 旧 。 巡 纺 (E) 可 看 (V)】 收 草 闪 (A) 工具 (1 孝 动 (H) 


我 们 的 公司 是 : 英 达 科技 文化 公司 


图 13-1 用 sessionStorage 方法 创建 对 象 的 效果 
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2. 制作 网 站 访问 记录 计数 器 


下 面 继续 使 用 sessionStorage 方法 做 实例 ， 主 要 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 
【 例 13.2】〔 实 例文 件 : ch13\13.2.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 

if (sessionStorage. count) 

由 

sessionStorage.count=Number(sessionStorage.count) +1; 
} 

else 

{ 

sessionStorage. count=1; 

} 

document.write(" 您 访问 该 网 站 的 次 数 为 ，" + sessionStorage.count); 
</script> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 13-2 所 示 。 如 果 用 户 刷新 一 次 页 面 ， 计 数 器 的 数值 将 加 1。 


有 Ee 
民国 | 日 caoneznm Pp - ox | Bovis |€ 


文件 (月 蝙 岛 (E) ”可 看 V) ”收藏 闪 A) 工具 (T) 帮助 (H) 
您 访问 该 网 站 的 次 数 为 ，5 


图 13-2 用 sessionStorage 方法 创建 计数 器 效果 


0! 如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 时 ， 计 数 器 将 重 置 为 1。 
提 示 
13.2.3 localStorage 方法 


与 seessionStorage 方法 不 同 ，localStorage 方法 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 网 页 
浏览 者 关闭 网 页 后 ， 再 次 打开 此 网 页 时 ， 数 据 依 然 可 用 。 
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创建 一 个 localStorage 方法 的 基本 语法 格式 如 下 : 


<script type="text/JavaScript"> 
localStorage.abc=" "; 
</script> 


1. 创建 对 象 
【 例 13.3】〔 实 例文 件 : ch13\13.3.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 

localStorage.name=" 学 习 html 5 最 新 的 技术 : Web 存储 "; 
document.write(localStorage.name); 

</script> 

</body> 

</html> 


在 IE 9.0 中 浏览 效果 如 图 13-3 所 示 , 即 可 看 到 localStorage 方法 创建 的 对 象 内 容 显示 在 网 


半 
全 


一 
2 | 

B=) | ochioue3hm P - cx | 埋 cv- | 要 cv 
文件 (有 ”六 名 (E) 查看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 


学 习 HTIL5 最 新 的 技术 ，Web 存 储 


图 13-3 用 localStorage 方法 创建 对 象 的 效果 
2. 制作 网 站 访问 记录 计数 器 


下 面 仍然 使 用 localStorage 方法 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 
看 到 localStorage 方法 和 sessionStorage 方法 的 区 别 。 
【 例 13.4】〔 实 例文 件 ， ch13\13.4.html) 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/JavaScript"> 
if (localStorage.count) 
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{ 

localStorage.count=Number(localStorage.count) +1; 
} 

else 

{ 

localStorage.count=1; 

} 
document.write(" 您 访问 该 网 站 的 次 数 为 : "+ localStorage.count"); 
</script> 

</body> 

</html> 


在 IE 9.0 中 的 浏览 效果 如 图 13-4 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 进 
行 加 1; 如 果 用 户 关 闭 浏览 器 窗口 ， 再 次 打开 该 网 页 ， 计数 器 会 继续 上 一 次 计数 ， 而 不 会 
重 置 为 1。 


天 一 - 

(SOI) 全 GAchl9u94html P - Ox| 5 |e | 
文件 (月 ”编辑 (E) 得 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
您 访问 该 网 站 的 次 数 为 ，1 


图 13-4 用 localStorage 方法 创建 计数 器 效果 
13.2.4 ”Web Storage API 的 其 他 操作 


Web Storage API 的 localStorage 和 sessionStorage 对 象 除了 以 上 基本 应 用 外 ， 还 有 以 下 两 
个 用 法 。 

1. 清空 localStorage 数据 

localStorage 的 clear() 函 数 用 于 清空 同 源 的 本 地 存储 数据 ， 比 如 localStorage.clear()， 它 将 
删除 所 有 本 地 存储 的 localStorage 数据 。 

而 Web Storage 的 另外 一 部 分 Session Storage 中 的 clear() 函 数 只 清空 当前 会 话 存 储 的 

2. 遍历 localStorage 数据 

遍历 localStorage 数据 可 以 查看 localStrage 对 和 象 保存 的 全 部 数据 信息 。 在 遍历 过 程 中 ， 需 
要 访问 localStorage 对 象 的 另外 两 个 属性 length 与 key。length 表示 localStorage 对 象 中 保存 数 
据 的 总 量 ，key 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 〈index) 配合 使 用 ， 表 示 键 名 对 
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应 的 数据 记录 ， 其 中 ， 索 引号 (index)〉 以 0 值 开 始 ， 如 果 取 第 3 条 键 名 对 应 的 数据 ，index 值 
应 该 为 2。 


注 


户 输入 信息 ,创建 Object 来 囊括 这 些 信息 ,用 JSON 字符 串 来 表示 这 个 Object， 把 JSON 字符 


取出 数据 并 显示 数据 内 容 的 代码 命令 如 下 : 


functino showInfoO){ 

var array=new Array(); 

for(var i=0:;i 

/调用 key 方法 获取 localStorage 中 数据 对 应 的 键 名 
// 如 这 里 键 名 是 从 testl 开始 递增 到 testN 的 ， 那 么 localStorage.key(0) 对 应 testl 
var getKey=localStorage.key(i; 

// 通 过 键 名 获取 值 ， 这 里 的 值 包括 内 容 和 日 期 

Var getVal=localStorage.getItem(getKey); 
/larray[0] 就 是 内 容 ，array[1] 是 日 期 
array=getVal.split(","); 

} 

} 


获取 并 保存 数据 的 代码 命令 如 下 : 


Var storage = window.localStorage; f 

or (var i=0, len = storage.length;i < len; i++){ 
var key = storage.key(i); 

var value = storage.getltem(key); 
console.log(key + "=" + value); } 


由 于 localStorage 不 仅 存储 了 这 里 所 添加 的 信息 ， 可 能 还 存储 其 他 信息 ， 但 是 那些 
信息 的 键 名 也 是 以 递增 数字 形式 表示 的 ， 这 样 如 果 这 里 也 用 纯 数 字 就 可 能 覆盖 另 

意 外 一 部 分 的 信息 ,所 以 建议 键 名 都 用 独特 的 字符 区 分 开 , 这 里 在 每 个 ID 前 加 上 test 
以 示 区 别 。 


3. 使 用 JSON 对 象 存 取 数 据 
在 HTML 5 中 可 以 使 用 JSON 对 象 存 取 一 组 相关 的 对 象 。 使 用 JSON 对 象 可 以 收集 一 组 用 


串 存放 在 localStorage 中 。 当 用 户 检索 指定 名 称 时 , 会 自动 用 该 名 称 去 localStorage 取得 对 应 的 
JSON 字符 串 ， 将 字符 串 解析 到 Object 对 象 ， 然 后 依次 提取 对 应 的 信息 ， 并 构造 HTML 文本 
输入 显示 。 


【 例 13.5】《〔 实 例文 件 : ch13\13.5.html) 
下 面 通过 一 个 简单 的 案例 ， 来 介绍 如 何 使 用 JSON 对 象 存 取 数 据 ， 具 体操 作 方法 如 下 。 


t0 贡 新 建 一 个 记事 本 文件 ， 具 体 代码 如 下 : 


<!DOCTYPE html> 
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<html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 JSON 对 象 存 取 数据 </title> 

<Scripttype="text/JavaScript" src="objectStorage.is"></script> 

</head> 

<body> 

<h3> 使 用 JSON 对 象 存 取 数 据 </h3> 

<h4> 填 写 待 存 取信 息 到 表格 中 </h4> 

<table> 

<tr><td> 用 户 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td>E-mail:</td><td><input type="text" id="email"></td></tr> 
<tr><td> 联 系 电话 :</td><td><input type="text" id="phone"></td></tr> 
<tr><td></td><td><input type="button" value=" 保 存 " onclick="saveStorage();"></td></tr> 
</table> 

<hr> 

<h4> 检 索 已 经 存 入 localStorage 的 json 对象， 并 且 展 示 原始 信息 </h4> 
<p> 

<input type="text" id="find"> 

<input type="button" value=" 检 索 " onclick="findStorage('msg");"> 
<jp> 

<!-- 下 面 这 块 用 于 显示 被 检索 到 的 信息 文本 --> 

<p id ="msg"></p> 


</body> 
</html> 
92 使 用 IE 9.0 浏览 保存 的 html 文件 ， 页 面 显示 效果 如 图 13-5 所 示 。 


ER 下 
属国 cataknmp - cx| 全 wsovsearaxx| | 


文件 (月 ”顽强 (E) ”查看 (V) ” 收 茂 交 (A) ”工具 (D 帮助 (H) 
使 用 JSON 对 象 存 取 数 据 
填写 待 存 取信 息 到 表 恪 中 


用 户 名 
E-mail 
联系 电话 
保存 
检索 已 经 大 入 localStorage 的 JSON 对 象 ， 并 且 展 示 原 始 信息 


检索 


图 13-5 创建 存 取 对 象 的 表格 
to3j 案例 中 用 到 了 JavaScript 脚本 ， 其 中 包含 两 个 函数 ， 一 个 存 数 据 ， 一 个 取 数 据 ， 具 体 
的 JavaScript 脚本 代码 如 下 : 


本 地 存储 技术 第 13 章 


function saveStorageO{f // 创 建 一 个 js 对 象 ， 用 于 存放 当前 从 表单 获得 的 数据 
var data = new Object; /将 对 象 的 属性 值 名 依次 和 用 户 输入 的 属性 值 关联 起 来 


data.user=document.getElementById("user").value; 
data.mail=document.getElementById("mail").value; 
data.tel=document.getElementById("tel").value; 

/创建 json 对 象 ， 让 其 与 在 html 文件 中 创建 的 对 象 的 字符 串 数据 形式 对 应 

var str = JSON .stringify(data); 

/将 json 对象 存放 到 localStorage 上 ，key 为 用 户 输入 的 NAME，value 为 这 个 json 字符 串 
localStorage.setItem( data.user,str); 

console.log(" 数 据 已 经 保存 ! 被 保存 的 用 户 名 为 : "+data.user); 


} 
// 从 localStorage 中 检索 用 户 输入 的 名 称 对 应 的 json 字符 串 , 然后 把 json 字符 串 解析 为 一 组 信息 , 并 且 打 


印 到 指定 位 置 


function findStorage(id){ // 获 得 用 户 的 输入 ， 是 用 户 希 望 检索 的 名 字 
Var requiredPersonName = document.getElementById("find").value; 

// 以 这 个 检索 的 名 字 来 查找 localStorage， 得 到 json 字符 串 

Var str=localStorage.getItem(requiredPersonName); 

/解析 这 个 json 字符 串 得 到 Object 对 象 

var data= JSON.parse(str); 

/从 Object 对 象 中 分 离 出 相关 属性 值 ， 然 后 构造 要 输出 的 html 内 容 

var result=" 用 户 名 :"+data.user+'<br>"; 

result+="E-mail:"+data.mail+'<br>'; 

resultt=" 联 系 电话 :"+data.tel+'<br>'; /取得 页 面 上 要 输出 的 容器 
vartarget = document.getElementById(id); // 用 刚才 创建 的 html 内 容 来 填充 这 个 容器 
target.innerHTML = result; 

} 


9 弛 将 js 文件 和 html 文件 放 在 同一 目录 下 , 再 次 打开 网 页 , 在 表单 中 依次 输入 相关 内 容 ， 
单 击 “保存 ”按钮 ， 如 图 13-6 所 示 。 


一 


~ Foe 
ED a mcssstm p+ cx|S ussovsenme. x| | 
立 件 (注油 (E) 至 赫 (V) 发 启 实 [Al 工具 (T) 都 荔 (H) 

使 用 JSON 对 人 象 存 取 数据 

填写 待 存 取信 息 到 表格 中 

用 户 名 :wang 


Email: wang 2013@163com 
联系 电话 : 13012345678 
[保存 


检索 已 经 存 入 localStorage 的 json 对 象 。 并 且 展 示 原 始 信息 
检索 


图 13-6 输入 表格 内 容 
tog 在 “检索 ”文本 框 中 输入 已 经 保存 的 信息 的 用 户 名 ， 单 击 “ 检 索 ” 按 钮 ， 则 在 页 面 


下 方 自动 显示 保存 的 用 户 信息 ， 如 图 13-7 所 示 。 
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闻 chl3\35Hml P ~- GX| 夸 ESONT 和 和 区- x 
EC 


使 用 JSON 对 依存 取 数 据 
寺 瑟 蔡 存 取信 息 到 表格 中 


用 户 各 丰 

aaal。 le 

喘 系 电话 : 13012345576 
[EE 


检索 已 经 存 入 localstorase 的 jsoa 对 象 ， 并 且 展 示 原始 信息 
相合 


图 13-7 检索 数据 信息 
13.3 ”在 本 地 建立 数据 库 


上 述 简单 介绍 了 如 何 利用 localStorage 实现 本 地 存储 ， 实 际 上 ， 除 了 sessionStorage 和 
localStorage 外 , HTML 5 还 支持 通过 本 地 数据 库 进 行 本 地 数据 存储 , HTML 5 采用 的 是 SQLLite 
这 种 文件 类 型 数据 库 ， 该 数据 库 多 集中 在 嵌入 式 设备 上 。 

13.3.1 本 地 数据 库 概述 

可 以 使 用 OpenDatabase 方法 打开 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 则 使 用 此 方法 
将 会 创建 新 数据 库 。 打 开 或 创建 数据 库 的 代码 命令 如 下 : 

var db = openDatabase('mydb', '1.1', ' A list of to do items., 200000); 

上 述 代 码 的 括号 中 设置 了 5 个 参数 ， 其 意义 分 别 为 : 数据 库 名 称 、 版 本 号 、 文 字 说 明 、 数 
据 库 的 大 小 和 创建 回 滚 。 


| 如 果 数 据 库 已 经 创建 了 ， 第 五 个 参数 将 会 调用 此 回 滚 操作 。 如 果 省 略 此 参数 ， 则 
注意 仍 将 创建 正确 的 数据 库 。 


以 上 代码 的 意义 : 创建 了 一 个 数据 库 对 象 db， 名 称 是 mydb， 版 本 编号 为 1.1。db 还 带 
有 描述 信息 和 大 概 的 大 小 值 。 用 户 代理 (user agent) 可 使 用 这 个 描述 与 用 户 进行 交流 ， 说 明 
数据 库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 大 小 值 ,用户 代理 可 以 为 内 容留 出 足够 的 存储 。 如 
果 需 要 ， 这 个 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 假设 允许 用 户 使 用 多 少 空间 。 

为 了 检测 之 前 创建 的 连接 是 否 成 功 ， 可 以 检查 那个 数据 库 对 象 是 否 为 null: 


if(!db) 
alert("Failed to connect to database."); 


绝 不 可 以 假设 该 连接 已 经 成 功 建立 ,即使 过 去 对 于 某 个 用 户 是 成 功 的 ,为 什么 连接 会 失败 ， 


本 地 存储 技术 第 13 章 


存在 多 个 原因 。 也 许 用 户 代理 出 于 安全 原因 拒绝 你 的 访问 , 也 许 设备 存储 有 限 。 面 对 活跃 而 快 
速 进化 的 潜在 用 户 代理 ， 对 用 户 的 机 器 、 软 件 及 其 能 力作 出 假设 是 非常 不 明智 的 行为 。 


13.3.2 ”使 用 executeSql 方法 来 执行 查询 
通过 executeSql 方法 执行 查询 ， 代 码 如 下 : 


tx.executeSql(sqlQuery,[valuel,value2..],dataHandler'errorHandler) 

executeSql 方法 有 4 个 参数 ， 作 用 分 别 如 下 。 

@ sqlQuery: 需要 具体 执行 的 sql 语句， 可 以 是 create、select、update、delete。 

@ [valuel,value2..]: sql 语句 中 所 有 使 用 到 的 参数 数组 ， 在 executeSql 方法 中 ， 将 sql 语 

名 中 所 要 使 用 的 参数 先 用 “?” 代 蔡 ，, 然后 依次 将 这 些 参 数组 成 数组 放 在 第 二 个 参数 中 。 

@ dataHandler: 执行 成 功 是 调用 的 回调 函数 ， 通 过 该 函数 可 以 获得 查询 结果 集 。 

@ errorHandler: 执行 失败 时 调用 的 回调 函数 。 
13.3.3 ”使 用 transaction 方法 处 理事 件 

使 用 第 一 步 创建 的 数据 库 访问 对 象 (如 db) 执行 transaction 方法 ， 用 来 执行 事务 处 理 ， 
代码 如 下 : 

db.transaction(function(tx)){ 

// 执 行 访问 数据 库 的 语句 

D); 

transaction 方法 使 用 一 个 回调 函数 作为 参数 , 在 这 个 函数 中 , 执行 访问 数据 库 的 具体 操作 。 


13.4 浏览 器 对 Web 存储 的 支持 情况 


不 同 的 浏览 器 版 本 对 Web 存储 技术 的 支持 情况 是 不 同 的 ， 表 13-1 是 常见 浏览 器 对 Web 
存储 的 支持 情况 。 


表 13-1 常见 浏览 器 对 Web 存储 的 支持 情况 


浏览 器 名 称 支持 Web 存储 技术 的 浏览 器 版 本 
IE IE 8 及 更 高 版 本 

Firefox Firefox 3.6 及 更 高 版 本 

Opera Opera 10.0 及 更 高 版 本 

Safari Safari 4 及 更 高 版 本 

Chrome Chrome 5 及 更 高 版 本 

Android Android 2.1 及 更 高 版 本 


»239. | 
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13.5 ”综合 实例 一 一 制作 简单 Web 留言 本 


使 用 Web Storage 功能 可 以 用 来 制作 Web 留言 本 ， 具 体制 作 方 法 如 下 。 
WY 构建 页 面 框架 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 本 地 存储 技术 之 Web 留言 本 </title> 
</head> 

<body onload="init()"> 

</body> 

</html> 


92 添加 页 面 文件 ， 主 要 由 表单 构成 ， 包 括 单行 文本 表单 和 多 行文 本 表单 ， 代 码 如 下 : 


<hl>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> 留 言 </td> 
<td><textarea name="memo" id="memo" cols ="$50" rows = "5"></textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit" value=" 提 交 " onclick="saveData()" /> 
</td> 
</tr> 
</table> 
<ht> 
<table id="datatable" border="1"></table> 
<p id="msg"></p> 


to3j 为 了 执行 本 地 数据 库 的 保存 及 调用 功能 ， 需 要 插入 数据 库 的 脚本 代码 ， 具 体内 容 如 
下 : 
<script> 


Var datatable = null; 
var db = openDatabase("MyData","1.0","My Database",2*1024*1024); 
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function init() 
{ 
datatable = document.getElementById("datatable"); 
showAllData(); 
} 
function removeAllData0){ 
for(var i = datatable.childNodes.length-1;i>=0;i--){ 
datatable.removeChild(datatable.childNodes[i]); 
} 
Var tr = document.createElement('tr'); 
var thl = document.createElement('th"); 
var th2 = document.createElement('th"); 
var th3 = document.createElement('th"); 
thl.innerHTML = "用户 名 "; 
th2.innerHTML = "留言 "; 
th3.innerHTML = "时 间 "; 
tr.appendChild(th1); 
tr.appendChild(th2); 
tr.appendChild(th3); 
datatable.appendChild(tr); 
b 
function showAllData() 
1 
db.transaction(function(tx){ 
tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT,time INTEGER)',)); 
tx.executeSql('select * from MsgData',[],function(tx,rs){ 
removeAllData(); 
for(var i=0;i<rs.rows.length;i++){ 
showData(rs.rows.item(i)); 


); 

D); 

} 

function showData(row){ 
Var tr=document.createElement('tr’); 
vartdl = document.createElement('td"); 
tdl.innerHTML = row.name; 
Var td2 = document.createElement('td"); 
td2.innerHTML = row.message; 
var td3 = document.createElement('td"); 
var t=new Date(); 


t.setTime(row.time); 
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} 


ttd3.innerHTML = t.toLocaleDateString() +" " + t.toLocaleTimeString(); 
tr.appendChild(td1); 

tr.appendChild(td2); 

tr.appendChild(td3); 

datatable.appendChild(tr); 


function addData(name,message,time) { 


db.transaction(function(tx){ 
tx.executeSql('insert into MsgData values(?,?,?)',[name,message,time],functionx,rs){ 
alert(" 提 交 成 功 。"); 
},function(tx,error){ 
alert(error.source+"::"+error.message); 
}D); 
»D); 


}// End of addData 
function saveData() { 


var name = documentgetElementById(name').value; 
var memo = document.getElementById('memo').value; 
var time = new Date().getTime(); 
addData(name,memo,time); 

showAllData(); 


}// End of saveData 
</script> 

</head> 

<body onload="init()"> 


<hl>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> 留 言 </td> 
<td><textarea name= "memo" id="memo" cols ="S0" rows = "S"></textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit" value=" 提 交 " onclick="saveData()" /> 
</td> 
</tr> 
</table> 
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<ht> 
<table id="datatable" border="1"></table> 
<pid="msg"></p> 

</body> 

</html> 


t 鸣 文件 保存 后 ， 使 用 IE 9.0 浏览 页 面 ， 效 果 如 图 13-8 所 示 。 


> 


es 四 深 hl3\13.5html DC X 上 | 居 址 地 下 入 技术 之 Web.，x 上 


文件 (F)。 痊 声 (E) 。 豆 看 (V) 次 若 闪 (A) 工具 (D) 。 帮 动 (H) 


Web 留 言 本 


图 13-8 Web 留言 本 
13.6 ”问题 解答 


1. 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 

在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 用 户 使 用 的 是 下 浏 
览 器 ， 那 么 Web 存储 工作 时 ， 将 所 有 数据 存储 在 正 的 Web 存储 库 中 ， 如 果 用 户 使 用 火狐 浏 
览 器 访问 该 站 点 ， 将 不 能 读 取 下 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 是 分 开 并 独立 工 
作 的 。 


2. 离线 存储 站 点 时 是 否 需 要 浏览 者 同意 ? 
和 地 理 定位 类 似 , 在 网 站 使 用 manifest 文件 时 ,浏览 器 会 提供 一 个 权限 提示 ， 提 示 用 户 是 
和 否 将 离线 设 为 可 用 ， 但 是 不 是 每 个 浏览 器 都 支持 这 样 的 操作 。 


"243。 


第 14 章 线程 处 理 技术 


利用 Web Worker 技术 ， 可 以 实现 网 页 脚本 程序 的 多 线程 后 台 执 行 ， 并 且 不 会 影响 其 他 脚 
本 的 执行 ,为 大 型 网 站 的 顺畅 运行 提供 了 更 好 的 实现 方法 。 本 章 主要 讲述 线程 处 理 技术 , 包括 
Web Workers 概述 和 线程 的 能 套 运用 等 。 


14.1 Web Workers 


在 HTML 5 中 为 了 提供 更 好 的 后 台 程序 ， 设 计 了 Web Worker 技术 。Web Worker 的 产生 
主要 是 考虑 到 在 HTML 4 中 执行 的 JavaScript Web 程序 都 是 以 单线 程 的 方式 执行 的 , 一 旦 前 面 
的 脚本 花费 时 间 过 长 ， 后 面 的 程序 就 会 因 长 期 得 不 到 响应 而 使 用 户 页 面 操作 出 现 异常 。 


14.1.1 Web Workers 概述 


Web Worker 实现 的 是 线程 技术 ， 可 以 使 运行 在 后 台 的 JavaScript 独立 于 其 他 脚本 ， 不 会 
影响 页 面 的 性 能 。 

Web Worker 创建 后 台 线 程 的 方法 非常 简单 ， 只 需要 将 在 后 台 线 程 中 执行 的 脚本 文件 ， 以 
URL 地 址 的 方式 创建 在 worker 类 的 构造 器 中 就 可 以 了 ， 其 代码 格式 如 下 : 


Var worker=new worker(“worker.js”); 


目前 大 部 分 主流 的 浏览 器 都 支持 Web Worker 技术 。 创 建 Web Worker 之 前 ， 用 户 可 以 检 
测 浏览 器 是 否 支 持 它 ， 可 以 使 用 以 下 方法 检测 浏览 器 对 Web Worker 的 支持 情况 : 


if(typeof( Worker)!=="undefined") 
{ 
// Yes! Web Worker support! 
// Some code..... 
} 
else 
{ 
// Sorry! No Web Worker support.. 
} 


如 果 浏 览 器 不 支持 该 技术 的 话 ， 将 会 出 现 如 下 提示 信息 ， 如 图 14-1 所 示 。 
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EE3 EC 


ee 司 HAUsersAdminist P - © X | @ HUsers\ 


文件 (F) ” 注 编 (E) 得 看 (V) 收藏 交 (A) ”工具 (大 动 (H) 


Sorry! No Web Worker support.. 


图 14-1 程序 运行 结果 
14.1.2 ”线程 中 常用 的 变量 、 函 数 与 类 


在 进行 Web Worker 线程 创建 时 会 涉及 一 些 变量 、 函 数 与 类 内 容 ， 其 中 在 线程 中 执行 的 
JavaScript 脚本 文件 中 可 以 用 到 的 变量 、 函 数 与 类 介绍 如 下 。 


@ Self: Self 关 键 词 用 来 表示 本 线程 范围 内 的 作用 域 。 

@ Imports: 导入 的 脚本 文件 必须 与 使 用 该 线程 文件 的 页 面 在 同一 个 域 中 ， 并 在 同一 个 端 
口中 。 

@ ImportScripts (urls ): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 该 脚本 文件 的 URL 地 址 ， 
可 以 导入 多 个 脚本 文件 。 

@ Onmessage: 获取 接收 消息 的 事件 句柄 。 

Navigator 对 象 : 与 window.navigator 对 象 类 似 ， 具 有 appName、platform、userAgent、 

appVersion 这 些 属 性 。 

setTimeout()/setInterval(): 可 以 在 线程 中 实现 定时 处 理 。 

XMLHttpRequest: 可 以 在 线程 中 处 理 Ajax 请 求 。 

Web Workers: 可 以 在 线程 中 广 套 线程 。 

SessionStorage/localStorage: 可 以 在 线程 中 使 用 Web Storage 

Close: 可 以 结束 本 线程 。 

Eval()、isNaN()、escape(): 可 以 使 用 所 有 JavaScript 核心 函数 。 

Object: 可 以 创建 和 使 用 本 地 对 象 。 

WebSockets: 可 以 使 用 WebSockets API 来 向 服务 器 发 送 和 接收 信息 。 

postMessage ( message ): 向 创建 线程 的 源 窗口 发 送 消息 。 


14.1.3 与 线程 进行 数据 的 交互 


在 后 台 执 行 的 线程 是 不 可 以 访问 页 面 和 窗口 对 象 的 ,但 这 并 不 妨碍 前 台 和 后 台 线 程 进 行 数 
据 的 交互 ， 下 面 就 来 介绍 一 个 前 台 和 后 台 线 程 交互 的 案例 。 

本 案例 中 ， 后 台 执 行 的 JavaScript 脚本 线程 从 0~200 的 所 有 整数 中 随机 挑选 一 些 整数 ， 然 
后 在 这 些 选 出 的 整数 中 选择 可 以 被 5 整除 的 整数 , 最 后 将 这 些 选 出 的 整数 交 给 前 台 显示 , 以 实 
现 前 台 与 后 台 线程 的 数据 交互 。 
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0 则 完成 前 合 的 网 页 代码 ， 其 代码 内 容 如 下 ( 详 见 代 码 包 中 的 “素材 \ch14\14.1.html”) : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<title> 前 台 与 后 台 线 程 的 数据 交互 </title> 

<script type="text/JavaScript"> 

var intArray=new Array(200);// 随 机 数组 

var intStr=""; // 将 随机 数组 用 字符 串 进 行 连接 


// 生 成 200 个 随机 数 

for(var i=0;i<200;i++) 
intArray[il=parseInt(Math.random()*200); 
if(i!=0) 

intStrt=";"; // 用 分 号 作 随 机 数组 的 分 隔 符 

intStr+=intArray[i]; 

} 

// 向 后 全 线程 提交 随机 数组 


Var worker = new Worker("14.1.js"); 

worker.postMessage(intStr); 

// 从 线程 中 取得 计算 结果 

worker.onmessage = function(event) { 
iflevent.data!="") 


{ 
var h; // 行 号 
varl; // 列 号 
var tr; 
vartd; 


var intArray=event.data.split(";"); 
var table=document.getElementById("table"); 
for(var i=0;i<intArray.length;i++) 
{ 
h=parseInt(i/15,0); 
l=i1%15; 
// 该 行 不 存在 
这 1] 一 0) 
{ 
/添加 新 行 的 判断 
tr=document.createElement("tr"); 
tr.id="tr"+h; 
table.appendChild(tr); 
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// 该 行 已 存在 
else 
{ 
// 获 取 该 行 
tr=document.getElementById("tr"+h); 
} 
// 添 加 列 
td=document.createElement("td"); 
tr.appendChild(td); 
/设置 该 列 数字 内 容 
td.innerHTML=intArray[h*15+]]; 
/设置 该 列 对 象 的 背景 色 
td.style.backgroundColor="#f56848"; 
1/ 设置 该 列 对 象 数 字 的 颜色 
td.style.color="#000000"; 
/设置 对 象 数字 的 宽度 
td.width="30"; 


|: 
}; 
</script> 
</head> 
<body> 
<h2 style="text-shadow:0.1em 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h2> 
<table id="table"> 
</table> 
</body> 


02 为 了 实现 后 台 线 程 ,需要 编写 后 台 执 行 的 JavaScript 脚本 文件 ， 其 代码 格式 如 下 ( 详 
见 代码 包 中 的 “素材 \ch14\14.1.js” ) : 


onmessage = function(event) { 
Var data = event.data; 
Var returnStr; // 将 5 的 倍数 组 成 字符 串 并 返回 
var intArray=data.split(";"); /设置 返回 字符 串 中 数字 分 隔 符 为 “;” 号 
returnStr=""; 
for(var i=0;i<intArray.length;i++) 
d 


if(parseInt(intArray[i])%5 二 0) // 判 断 能 否 被 5 整除 
{ 
if(returnStr!="") 
returnStr+=";"; 
returnStr+=intArray[i]; 
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} 
} 
postMessage(returnStr); /返回 5 的 倍数 组 成 的 字符 串 


} 
tQ3j 使 用 Firefox 浏览 器 打开 编辑 好 的 网 页 文件 ， 显 示 效 果 如 图 14-2 所 示 。 


) 前 台 与 后 台 线程 的 数据 交互 - ozilla Firefo 
编辑 加” 查看 WD 历史 全 书签 加 ”工具 中 姑 助 四 


和 @sil:///Q CI 轿 - 


从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 


图 14-2 程序 运行 结果 


[六 由 于 数字 是 随机 产生 的 ， 所 以 每 次 生成 的 数据 序列 都 是 不 同 的 。 
注 意 


14.2 ”线程 嵌 套 
线程 中 可 以 翌 套 子 线程 , 这 样 就 可 以 将 后 台中 较 大 的 线程 切割 成 多 个 子 线程 , 每 个 子 线程 
独立 完成 一 份 工作 ， 可 以 提高 程序 的 效率 。 
14.2.1 单线 程 谋 套 


最 简单 的 线程 嵌 套 是 单 层 的 嵌 套 ,下面 来 介绍 一 个 单线 程 的 翌 套 案例 , 该 案例 所 实现 的 效 
果 和 14.1.3 节 中 案例 的 效果 相似 。 其 操作 方法 如 下 。 


@ 完成 网 页 前 台 页 面 的 代码 内 容 ， 具 体 代 码 如 下 ( 详 见 代码 包 中 的 “素材 
\ch14\14.2.html” ) : 


<!DOCTYPE html> 

<head> 

<meta charset="UTF-8"> 

<script type="text/JavaScript"> 

Var worker = new Worker("14.2.js"); 
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</head> 

<body> 

<h2 style="text-shadow:0.1em 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 </h2> 
<table id="table"> 

</table> 

</body> 


to3 下 面 编写 程序 后 台 执 行 的 主线 程 的 代码 内 容 , 该 线程 用 于 执行 数据 挑选 , 会 在 0~200 
之 间 随 机 产生 200 个 随机 整数 (数字 可 重复 ) ， 并 将 其 交 与 子 线程 ， 让 子 线程 挑选 可 以 被 5 
整除 的 数字 ( 详 见 代 码 包 中 的 “素材 \ch14\14.2.js”) : 


onmessage=function(event){ 

var intArray=new Array(200); /产生 随机 的 数组 

/生成 200 个 随机 数 

for(var i=0;i<200;i++) /数字 范围 为 0~200 
intArray[i]=parseInt(Math.random()*200); 

Var worker; 

// 调 用 子 线程 

worker=new Worker("14.2-2.js"); 

/将 随机 数组 提交 给 子 线程 

worker.postMessage(JSON .stringify(intArray)); 

worker.onmessage = function(event) { 
// 将 挑选 结果 返回 主页 面 
postMessage(event.data); 


} 
to3j 经 过 步骤 2 中 主线 程 的 数字 挑选 后 ,可 以 通过 以 下 子 线程 将 这 些 数字 拼接 成 字符 串 ， 
并 返回 主线 程 ， 其 操作 代码 如 下 ( 详 见 代码 包 中 的 “素材 vch14\14.2-2js”) : 


onmessage = function(event) { 
var intArray= JSON.parse(event.data); 
Var returnStr; 
returnStr=""; 
for(var i=0;i<intArray.length;i++) 
€ 
// 判 断 数 字 能 否 被 5 整除 
if(parseInt(intArray[i])%5—0) 
{ 
if(returnStr!="") 
returnStr+=";"; 
// 将 所 有 可 以 被 5 整除 的 数字 拼接 成 字符 串 
returnStr+=intArray[i]; 
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$ 
} 
// 返 回 拼接 后 的 字符 串 至 主线 程 
postMessage(returnStr); 
// 关 闭 子 线程 
close(); 
| 
to 绚 使 用 Firefox 浏览 器 查看 网 页 前 台 页 面 ， 随 机 产生 了 一 些 可 以 被 5 整除 的 数字 ， 如 图 


14-3 所 示 。 
编辑 巴 查看 0 历史 G) 书签 中 工具 四 帮助 


] file: 7/AE:/ 写 书 /2…y/ch09/9.2.html x 
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图 14-3 程序 运行 结果 
14.2.2 ”多 个 子 线程 中 的 数据 交互 
在 实现 上 述 案例 时 ， 也 可 以 将 子 线程 再 次 拆 分 ,生成 多 个 子 线程 ， 由 多 个 子 线程 同时 完成 
工作 ， 这 样 可 以 提高 处 理 速度 ， 对 较 大 的 JavaScript 脚本 程序 来 说 很 有 用 。 
下 面 将 上 述 案 例 的 程序 改 为 多 个 子 线程 嵌 套 的 数据 交互 案例 。 
网 页 前 台 文 件 不 需要 修改 ， 主 线程 的 脚本 文件 应 当做 如 下 修改 〈 详 见 代 码 包 中 的 “素材 
\chl4\14.3js”) : 


onmessage=function(event){ 
Var worker; 
/调用 发 送 数据 的 子 线程 
worker=new Worker("14.3-2.js"); 
worker.postMessage("™"); 
worker.onmessage = function(event) { 
// 接 收 子 线程 中 数据 ， 本 示例 中 为 创建 好 的 随机 数组 
Var data=event.data; 
// 创 建 接收 数据 子 线程 
worker=new Worker("14.2-2.js"): 
// 把 从 发 送 数 据 子 线程 中 发 回 消息 传递 给 接收 数据 的 子 线程 
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worker.postMessage(data); 
worker.onmessage = function(event) { 
/获取 接收 数据 子 线程 中 传 回 数据 ， 本 示例 中 为 挑选 结果 


Var data=event.data; 
// 把 挑选 结果 发 送 回 主页 面 
postMessage(data); 
} 
上 


} 


上 述 代码 的 主线 程 脚本 中 提 到 了 两 个 子 线程 脚本 ， 其 中 一 个 14.3-2js 负责 创建 随机 数组 ， 
并 发 送 给 主线 程 ， 另 一 个 14.2-2js 负责 从 主线 程 接收 选 好 的 数组 ， 并 进行 处 理 。14.2-2.js 脚本 
延 用 14.2 节 的 脚本 文件 。14.3-2.js 脚本 文件 的 详细 代码 如 下 详 见 代码 包 中 的 “素材 
\chl4\14.3-2js”) : 


onmessage = function(event) { 

Var intArray=new Array(200); 

for(var i=0;i<200;i++) 
intArray[i]=parseInt(Math.random()*200); 

postMessage(JSON .stringify(intArray)); 

close(); 

| 


执行 后 的 效果 如 图 14-4 所 示 。 


a © sile: /1/z:/ 写 书 /2…/ehos/9.2.htal x 图 
大 fsile/1/ 加 CC 图 -5 记忆 | 例会 全 
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图 14-4 程序 运行 结果 
CY 通过 以 上 几 个 案例 的 展示 ， 其 最 终 显示 结果 都 是 相同 的 ， 只 是 代码 的 编辑 与 线程 


的 误 套 有 所 差异 ， 在 实际 的 应 用 中 合理 地 襄 套 子 线程 虽然 会 使 代码 结构 变 复杂 ， 
提 示 但 是 却 能 在 很 大 程度 上 提高 程序 的 处 理 效率 。 
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14.3 ”综合 实例 一 一 创建 Web Worker 计数 器 


本 实例 主要 创建 了 简单 的 Web Worker， 实 现在 后 台 计 数 的 功能 。 具 体操 作 步 又 如 下 。 
OH 首先 创建 外 部 的 JavaScript 文件 workers01.js， 主 要 用 于 计数 ， 代 码 如 下 : 


Var i=0; 


function timedCount() 

{ 

i=i+tl; 

postMessage(i); 
setTimeout("timedCount()",500); 
b 

timedCount(); 


oa 以 上 代码 中 重要 的 部 分 是 postMessage() 方 法 ,主要 用 于 向 HTML 页 面 传 
下 面 创建 HTML 页 面 的 代码 如 下 : 


加 


一 段 消息 。 


<!DOCTYPE html> 

<html> 

<body> 

<p> 计 数 :<output id="result"></output></p> 

<button onclick="startWorker0"> 开 始 Worker</button> 
<button onclick="stopWorker0"> 停 止 Worker</button> 
<br 户 <br 户 

<script> 

Var Ww; 

function startWorker() 


{ 
<! 一 首先 判断 浏览 器 是 否 支持 Web Worker --> 
if(typeof( Worker)!=="undefined") 

{ 
<! 一 检测 是 否 存在 worke， 如 果 不 存 在 ， 它 会 创建 一 个 新 的 Web Worker 对 象 , 然后 运行 " workersjs01" 

中 的 代码 --> 
if(typeof(w)=—"undefined") 
w=new Worker("/workers01.js"); 
b 

<! 一 向 Web Worker 添加 一 个 "onmessage" 事 件 监听 器 --> 


w.onmessage = function (event) { 


document.getElementById("result").innerHTML=event.data; 
瑟 
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else 
{ 
document.getElementById("result").innerHTML=" 对 不 起 ,您 的 浏览 器 不 支持 Web Workers..."; 
} 

} 

function stopWorker() 

{ 

<! 一 终止 Web Worker， 并 释放 浏览 器 /计算 机 资源 --> 

Ww.terminate(); 

} 

</script> 

</body> 

</html> 


运行 结果 如 图 14-5 所 示 。 


计数 : 
| 开始 Worker | 停止 Worker 


图 14-5 程序 运行 结果 

14.4 ”问题 解答 
1. 工作 线程 (Web Worker) 的 主要 应 用 场景 有 哪些 ? 
工作 线程 的 主要 应 用 场景 有 三 个 ， 分 别 如 下 : 


@ 使 用 工作 线程 做 后 台数 值 (算法 ) 计算 。 
@ 使 用 共享 线程 处 理 多 用 户 并 发 连接 。 
@ HTML 5 线程 代理 。 


Bd 


目前 浏览 器 对 Web Worker 的 支持 情况 如 何 ? 
目前 大 部 分 主流 的 浏览 器 都 支持 Web Worker， 但 是 正 并 不 支持 。 


第 15 章 构建 离线 Web 应 用 程序 


网 页 离线 应 用 程序 是 实现 离线 Web 应 用 的 重要 技术 。 目 前 已 有 的 离线 Web 应 用 程序 很 多 ， 
都 需要 本 书 的 知识 做 基础 。 通 过 本 章 的 学 习 ， 读 者 能 够 掌握 HTML 5 离线 应 用 程序 的 基础 知 
识 ， 了 解 离线 应 用 程序 的 实现 方法 。 


15.1 HTML 5 离线 应 用 程序 


为 了 能 在 离线 的 情况 下 访问 网 站 ， 可 以 采用 HTML 5 的 离线 Web 功能 。 下 面 来 学 习 Web 
应 用 程序 如 何 缓存 。 


15.1.1 本 地 缓存 


在 HTML 5 中 ， 新 增 了 本 地 缓存 ， 也 就 是 HTML 离线 Web 应 用 ， 主 要 是 通过 应 用 程序 组 
存 整个 离线 网 站 的 HTML、CSS、JavaScript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Internet 建立 
连接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 

另外 如 果 网 站 发 生 了 变化 ， 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 


15.1.2 ”本 地 缓存 与 浏览 器 网 页 缓存 的 区 别 
浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 : 


@ 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 都 进行 
缓存 操作 ， 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 

@ 在 网 络 连接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 但 是 一 旦 离线 ， 用 户 单 
击 链接 时 ， 将 会 得 到 一 个 错误 消息 。 而 本 地 缓存 在 离线 时 ， 仍 然 可 以 正常 访问 。 

@ 对 于 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 ， 这 些 内 容 是 否 安全 等 都 未 
知 ; 而 本 地 缓存 的 页 面 是 编程 人 员 指 定 的 内 容 ， 所 以 相对 比较 安全 。 


15.1.3 ”支持 离线 行为 


要 支持 离线 行为 ， 首 先 要 能 够 判断 网 络 连接 状态 ， 在 HTML 5 中 引入 了 一 些 判断 应 用 
序 网 络 连接 是 否 正常 的 新 事件 。 对 应 应 用 程序 的 在 线 状 态 和 离线 状态 会 有 不 同 的 行为 模式 。 
用 于 实现 在 线 状态 监测 的 是 window.navigator 对 象 的 属性 。 其 中 的 navigator.online 属性 是 
一 个 表明 浏览 器 是 否 处 于 在 线 状态 的 布尔 属性 ， 当 online 值 为 true 时 并 不 能 保证 Web 应 用 程 
序 在 用 户 的 机 器 上 一 定 能 访问 到 相应 的 服务 器 ， 而 当 其 值 为 false 时 ， 不 管 浏览 器 是 否 真正 联 


十 


但 
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网 ， 应 用 程序 都 不 会 尝试 进行 网 络 连接 。 

监测 页 面 状 态 是 在 线 还 是 离线 的 具体 代码 如 下 : 
/页 面 加 载 的 时 候 ， 设 置 状 态 为 online 或 offline 
function loaddemo(){ 

if (navigator.online) { 

log("online"); 

}else { 

log("offline"); 
上 


} 

// 添 加 事件 监听 器 ， 在 线 状态 发 生变 化 时 ， 触 发 相应 动作 

window.addeventlistener("online",function€{ 

}, true); 

window.addeventlistener("offline",function(e) { 
log("“offline”™); 

},true); 


0 上 述 代码 可 以 在 IE 浏览 器 中 使 用 。 


提 示 
15.2 了 解 Manifest (清单 ) 文件 


那么 客户 端的 浏览 器 如 何 分 清 应 该 缓存 哪些 文件 呢 ? 这 就 需要 依靠 manifest 文件 来 管理 。 
manifest 文件 是 一 个 简单 的 文本 文件 , 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 
缓存 的 资源 文件 的 文件 名 称 以 及 这 些 资源 文件 的 访问 路 径 。 

Manifest 文件 把 指定 的 资源 文件 类 型 分 为 三 类 ， 分 别 是 CACHE 、NETWORK 和 
FALLBACK， 这 三 种 类 型 的 含义 分 别 如 下 。 


@ CACHE 类 别 : 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 : 
如 果 为 某 个 页 面 指定 需要 本 地 缓存 的 资源 文件 ,不 需要 把 这 个 页 面 本 身 指 定 在 CACHE 
类 型 中 ， 因 为 如 果 一 个 页 面具 有 manifest 文件 ， 浏 览 器 会 自动 对 这 个 页 面 进 行 本 地 缓 
存 。 

@ NETWORK 类 别 : 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 只 有 当 客 户 端 与 服务 器 端 建 
立 连 接 的 时 候 才 能 访问 这 些 资 源 文件 。 

@ FALLBACK 类 别 : 该 类 别 中 指定 两 个 资源 文件 , 其 中 一 个 资源 文件 为 能 够 在 线 访 问 时 
使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 


以 下 是 一 个 简单 的 manifest 文件 的 内 容 : 


CACHE MANIFEST 
# 文 件 的 开头 必须 是 CACHE MANIFEST 
CACHE: 
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123.html 

myphoto.jpg 

12.php 

NETWORK: 
http://www.baidu.com/xxx 
feifei.php 

FALLBACK: 

onlinejs locale.js 


上 述 代码 含义 分 析 如 下 : 


@ 指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文件 
为 独立 的 一 行 。 

@ 第 一 行 必 须 是 CACHE MANIFEST， 此 行 的 作用 是 告诉 浏览 器 需要 对 本 地 缓存 中 的 资 
源 文件 进行 具体 设置 。 

@ 每 种 类 型 都 必须 出 现 ， 而 且 同 一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指定 类 别 而 
直接 书写 资源 文件 的 时 候 ， 浏 览 器 把 这 些 资 源 文 件 视 为 CACHE 类 别 。 

@ 在 manifest 文 件 中 ， 注 释 行 以 “# ”开始 ， 主 要 作用 是 进行 一 些 必要 的 说 明 或 解释 。 

为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 的 html 元 素 的 manifest 属 

性 中 指定 manifest 文件 的 URL 地 址 。 具 体 的 代码 如 下 : 


<html manifest="123.manifest"> 
</html> 


添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 了 。 


0 用 户 可 以 为 每 个 页 面 单 独 指定 一 个 mainifest 文件 , 也 可 以 对 整个 Web 应 用 程序 指 
提示 定 总 的 manifest 文件 。 
人 \ 


上 述 操作 完成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 的 目的 。 当 要 对 本 地 缓存 区 的 内 容 进 行 修 
改 时 ， 只 需 修 改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 更 
新 本 地 缓存 区 中 的 内 容 。 


15.3 了 解 applicationcache API 


传统 的 Web 程序 中 浏览 器 也 会 对 资源 文件 进行 缓存 ， 但 是 并 不 是 很 可 靠 ， 有 时 起 不 到 预 
期 的 效果 。 而 HTML 5 中 的 application cache 支持 离线 资源 的 访问 , 为 离线 Web 应 用 的 开发 提 
供 了 可 能 。 

使 用 application cache API 的 好 处 有 以 下 几 点 。 


@ 用 户 可 以 在 离线 时 继续 使 用 。 
@ 缓存 到 本 地 ， 节 省 带宽 ， 加 速 用 户 体验 的 反馈 。 
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@ 减轻 服务 器 的 负载 。 


Applicationcache API 是 一 个 操作 应 用 缓存 的 接口 ， 是 


window 对 象 的 直接 子 对 象 


window.applicationcache 。window.applicationcache 对 象 可 触发 一 系列 与 缓存 状态 相关 的 事件 。 
具体 事件 如 表 15-1 所 示 。 


此 外 ， 没 有 可 用 更 新 或 者 发 生 错 误 时 ， 还 有 一 些 表示 更 新 状态 的 事件 : 


Onerror 


Onnoupdate 
onprogress 


表 15-1 window.applicationcache 对 象 触发 的 事件 
事件 接口 触发 条 件 后 续 事 件 
用 户 代 理 检 查 更 新 或 者 在 第 一 次 尝试 下 载 manifest 文件 的 | noupdate, downloa 
checking Event a _ 。 
时 候 ， 本 事件 往往 是 事件 队列 中 第 一 个 被 触发 的 ding, obsolete, error 
noupdate Event 检测 出 manifest 文件 没有 更 新 无 
人 ee 用 户 代 理发 现 更 新 并 且 正 在 获取 资源 ， 或 者 第 一 次 下 载 | progress, error, cac 
W] 
SO ee manifest 文件 列表 中 列举 的 资源 hed, updateready 
P ， ， 
progress TB | 用户 代理 正在 下 载 manifest 文件 中 需要 缓存 的 资源 ee 
Event hed, updateready 
cached Event manifest 中 列举 的 资源 已 经 下 成 ， 并 且 已 经 缓存 无 
和 manifest 中 列举 的 文件 已 经 重新 下 载 并 更 新 成 功 ， 接 下 来 无 
t 于 
”| “| Javaseript 可 以 使 用 swapCache0 方 法 更 新 到 应 用 程序 中 
manifest 的 请 求 出 现 404 或 者 410 错误 ， 应 用 程序 缓存 被 | _. 
obsolete Event 取消 无 


该 对 象 有 一 个 数值 型 属性 window.applicationcache.status, 代表 了 缓存 的 状态 。 缓存 状态 共 
有 6 种， 如 表 15-2 所 示 。 


表 15-2 缓存 状态 


数值 型 属性 缓存 状态 含义 

0 UNCACHED 未 缓存 

i IDLE 空闲 

2 | cHECKING 检查 中 

3 | DOWNLOADING 下 载 中 
4 | UPDATEREADY 更 新 就 绪 
5 | OBSOLETE 过 期 


window.applicationcache 有 三 个 方法 ， 如 表 15-3 所 示 。 


构建 离线 Web 应 用 程序 第 15 章 


表 15-3 window.applicationcache 的 方法 


方法 名 描述 

update() 发 起 应 用 程序 缓存 下 载 进程 
abort() 取消 正在 进行 的 缓存 下 载 
swapcache() 切换 成 本 地 最 新 的 缓存 环境 


【分 调用 update() 方 法 会 请 求 浏览 器 更 新 缓存 , 包括 检查 新 版 本 的 manifest 文件 并 下 载 
话音 必要 的 新 资源 。 如 果 没 有 缓存 或 者 缓存 已 过 期 ， 则 会 抛 出 错误 。 


15.4 浏览 器 对 Web 离线 应 用 的 支持 情况 


不 用 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 是 不 同 的 ， 表 15-4 是 常见 浏览 器 对 
Web 离线 应 用 的 支持 情况 。 


表 15-4 常见 浏览 器 对 Web 离线 应 用 的 支持 


ET 


15.5 ”综合 实例 一 一 离线 定位 跟踪 


下 面 结合 上 述 内 容 的 学 习 来 构建 一 个 离线 Web 应 用 程序 ， 具 体内 容 如 下 。 


tQg 创建 记录 资源 的 manifest 文件 。 首 先 要 创建 一 个 缓冲 清单 文件 123.manifest， 文 件 中 
列 出 了 应 用 程序 需要 缓存 的 资源 。 具 体 实现 代码 如 下 : 


CACHE MANIFEST 
# JavaScript 
/offline.js 

#./123.js 

-logjs 

#stylesheets 
/CSS.css 

#images 


W022 创建 构成 界面 的 HTML 和 CSS。 下 面 来 实现 网 页 结构 ， 其 中 需要 指明 程序 中 用 到 的 


HTMmL 5 从 零 开 始 学 视频 教学 版 


JavaScript 文件 和 CSS 文件 ， 并 且 还 要 调用 manifest 文件 。 具 体 实现 代码 如 下 : 


<!DOCTYPE html > 
<html lang="en" manifest="123.manifest"> 
<head> 
<title> 创 建构 成 界面 的 html 和 CSS</title> 
<script src="log.js"></script> 
<script src="offline.is"></script> 
<script sre="123.js"></script> 
<link rel="stylesheet" href="CSS.css" 亡 
</head> 
<body> 
<header> 
<hl>Web 离线 应 用 </h1> 
</header> 
<section> 
<article> 
<button id="installbutton">check for updates</button> 
<h3>log</h3> 
<div id="info"> 
</div> 
</article> 
</section> 
</body> 
</html> 


上 述 代码 中 有 两 点 需要 注意 。 其 一 ， 因 为 使 用 了 manifest 特性 ， 所 以 HTML 元 素 
不 能 省 略 (为 了 使 代码 简洁 ，HTML 5 中 允许 省 咯 不 必要 的 HTML 元 素 ) 。 其 二 ， 
注 意 代码 中 引入 了 按钮 , 其 功能 是 允许 用 户 手动 安装 Web 应 用 程序 , 以 支持 离线 情况 。 


03) 创建 离线 的 JavaScript. 在 网 页 设计 中 经 常会 用 到 JavaScript 文件 ,该 文件 通过 <script> 
标签 引入 网 页 。 在 执行 离线 Web 应 用 时 ， 这 些 JavaScript 文件 也 会 一 并 存储 到 缓存 中 。 


<offline.js> 
ea 
* 记 录 window.applicationcache 触发 的 每 一 个 事件 
vad 
window.applicationcache.onchecking = 
function(e) { 
log("checking for application update"); 
} 
window.applicationcache.onupdateready = 


构建 离线 Web 应 用 程序 


第 15 章 


function(e) { 

log("application update ready"); 

} 
window.applicationcache.onobsolete = 
function(e) { 

log("application obsolete"); 

} 
window.applicationcache.onnoupdate = 
function(e) { 

log("no application update found"); 

} 
window.applicationcache.oncached = 
function(e) { 

log("application cached"); 

上 
window.applicationcache.ondownloading = 
function(e) { 

log("downloading application update"); 

} 
window.applicationcache.onerror = 
function(e) { 

log("online"); 

}, true); 

/* 
* 将 applicationcache 状态 代码 转换 成 消息 
yy 
showcachestatus = function(n) { 


statusmessages = ["uncached","idle","checking","downloading","update ready","obsolete"]; 


return statusmessages[n]; 
1 
install = function(){ 
log("checking for updates"); 
try{ 
window.applicationcache.update(); 
} catch (e) { 
applicationcache.onerror(); 


} 
onload = function(e) { 
// 检 测 所 需 功能 的 浏览 器 支持 情况 
这 !window.applicationcache) { 


log("html $5 offline applications are not supported in your browser."): 
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return; 
} 
if(!window.localstorage) { 
log("html 5 local storage not supported in your browser."); 
return; 
} 
if(!navigator.geolocation) { 
log("html 5 geolocation is not supported in your browser."); 
return; 
} 
log("initial cache status: " + showcachestatus(window.applicationcache.status)); 
document.getelementbyid("installbutton").onclick = checkfor; 
| 
<log.js> 
log = function() { 
var p= document.createelement("p"); 
Var message = array.prototype.join.call(arguments," "); 
p.innerhtml = message 
document.getelementbyid("info").appendchild(p); 
} 
04 检查 applicationCache 的 支持 情况 。 并 非 所 有 浏览 器 都 可 以 支持 applicationCache 对 
象 , 所 以 在 编辑 时 需要 加 入 浏览 器 支持 性 检测 功能 , 并 提醒 浏览 者 页 面 无 法 访问 是 浏览 器 兼容 
问题 。 具 体 实现 代码 如 下 : 


onload = function(e) { 
// 检测 所 需 功 能 的 浏览 器 支持 情况 
if (!window.applicationcache) { 
log(" 您 的 浏览 器 不 支持 html 5 Offline Applications "); 
return; 
| 
if (!window.localStorage) { 
log(" 您 的 浏览 器 不 支持 html 5 Local Storage "); 
return; 
} 
让 (!window.WebSockeb { 
log(" 您 的 浏览 器 不 支持 html 5 WebSocket "); 
return; 
b 
if (Inavigator.geolocation) { 
log(" 您 的 浏览 器 不 支持 html 5 Geolocation "); 
return; 
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log("lnitial cache status:" + showCachestatus(window.applicationcache.status)); 
document.getelementbyld("installbutton").onclick = install; 
} 


to9j 为 update 按钮 添加 处 理 函 数 。 下 面 来 设置 update 按钮 的 行为 函数 ， 该 函数 功能 为 执 
行 更 新 应 用 缓存 ， 具 体 代 码 如 下 : 


install = function() { 
log(“checking for updates™); 

try{ 
window.applicationcache.update(); 
} catch (e) { 
applicationcache.onerror(): 

上 

} 


单 击 按钮 后 将 检查 缓存 区 ， 并 更 新 需要 更 新 的 缓存 资源 。 当 所 有 可 用 更 新 都 下 载 
完毕 之 后 ， 将 向 用 户 界 面 返回 一 条 应 用 程序 安装 成 功 的 提示 信息 ， 接 下 来 用 户 就 
注 总 ”可 以 在 离线 模式 下 运行 了 。 


togj 添加 Storage 功能 代码 。 当 应 用 程序 处 于 离线 状态 时 , 需要 将 数据 更 新 写 入 本 地 存储 ， 
本 实例 使 用 storage 实现 该 功能 ， 因 为 当 上 传 请 求 失败 后 可 以 通过 storage 得 到 恢复 。 如 果 应 用 
程序 遇 到 某 种 原因 导致 网 络 错误 , 或 者 应 用 程序 被 关闭 的 时 候 , 数据 会 被 存储 以 便 下 次 再 进行 
传输 。 


实现 storage 功能 的 具体 代码 如 下 : 
Var storelocation =function(latitude, longitude){ 


1/ 加载 localstorage 的 位 置 列表 

Var locations = json.pares(localstorage.locations || "[]"); 

// 添 加 地 理 位 置 数 据 

locations.push( {"latitude" : latitude, "longitude" : longitude} ); 
// 保 存 新 的 位 置 列表 

Localstorage.Locations = json.stringify(locations); 


由 于 localstorage 可 以 将 数据 存储 在 本 地 浏览 器 中 , 特别 适用 于 具有 离线 功能 的 应 用 程序 ， 
所 以 本 实例 中 用 它 来 保存 坐标 。 本 地 存储 中 的 缓存 数据 在 网 络 连 接 恢复 正常 后 , 应 用 程序 会 自 
动 与 远程 服务 器 进行 数据 同步 。 

9 本 添加 离线 事件 处 理 程序 。 对 于 离线 Web 应 用 程序 ， 在 使 用 时 要 结合 当前 状态 执行 特 
定 的 事件 处 理 程序 ， 本 实例 中 的 离线 事件 处 理 程序 设计 如 下 : 


@ 如 果 应 用 程序 在 线 ， 事 件 处 理 函 数 会 存储 并 上 传 当 前 坐标 ; 
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@ 如 果 应 用 程序 离线 ， 事 件 处 理 函 数 只 存储 不 上 传 ; 
@ 当 应 用 程序 重新 连接 到 网 络 后 ， 事 件 处 理 函 数 会 在 UI 上 显示 在 线 状 态 ， 并 在 后 台 上 
传 之 前 存储 的 所 有 数据 。 


具体 实现 代码 如 下 


window.addeventlistener(“online”, function(e){ 
Log(online”); 
}, true); 
window.addeventlistener(“offline”, function(e) { 
Log(offline™); 

}, true); 

网 络 连接 状态 在 应 用 程序 没有 真正 运行 的 时 候 可 能 会 发 生 改变 ， 例 如 用 户 关 闭 了 浏览 器 、 
刷新 页 面 或 跳 转 到 了 其 他 网 站 , 为 了 应 对 这 些 情况 , 离线 应 用 程序 在 每 次 页 面 加 载 时 都 会 检查 
与 服务 器 的 连接 状况 ， 如 果 正 常 ， 会 尝试 与 远程 服务 器 同步 数据 : 

if(navigator.online){ 

Uploadlocations(); 


在 IE 9.0 浏览 器 中 的 预览 效果 如 图 15-1 所 示 。 


(a | mchisus hn P - © x | © Rta masHTM. 


文人 (天 澳 (重要 MV) 收 定 (A) 工具 人 T) 可 区) 
Web 离线 应 用 


i 
check for updates 


log 


图 15-1 程序 运行 结果 
15.6 ”问题 解答 


1. 如 何 更 新 离线 存储 ? 

更 新 HTML 5 离线 缓存 主要 有 三 种 方法 : 

@ 用 户 清除 了 离线 存储 的 数据 ， 这 样 不 一 定 是 清理 浏览 器 历史 记录 就 能 做 到 的 ， 因 为 不 
同 浏览 器 管理 离线 存储 的 方式 不 同 。 比 如 Firefox 的 离线 存储 数据 要 到 “选项 ”一 “高 
级 ”一 “网 络 ” 一 “ 脱 机 存储 ”里 才 可 以 清除 。 
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@ 修改 manifest 文件 。 
@ 使 用 JavaScriptAPI 编写 更 新 程序 。 


2. 离线 存储 功能 的 主要 作用 有 哪些 ? 

目前 , 在 最 新 的 主流 浏览 器 中 都 已 添加 了 对 HTML 5 的 offline storage 功能 的 支持 , HTML 
5 离线 存储 功能 非常 强大 ， 它 的 作用 是 : 在 用 户 没 有 与 因特网 连接 时 ， 照 样 可 以 访问 站 点 或 应 
用 ， 在 用 户 与 因特网 连接 时 ， 自 动 更 新 缓存 数据 。 


第 16 意 HTML5 的 拖 放 功 能 
拖 放 是 一 种 常见 的 特性 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 ， 在 HTML 5 中 ， 拖 放 是 标准 
的 一 部 分 ， 任 何 元 素 都 能 够 被 拖 放 。 常 见 的 拖 放 元 素 为 图 片 、 文 字 等 。 
16.1 一 个 简单 的 拖 放 实 例 


下 面 给 出 一 个 简单 的 拖 放 实例 , 主要 实现 的 功能 就 是 把 一 张 图 片 拖 放 到 一 个 矩形 当中 , 实 
例 的 具体 实现 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

#div] {width:150px;height:150px;padding:10px;border: 1px solid #aaaaaa;} 
</style> 

<script type="text/JavaScript"> 

function allowDrop(ev) 

ev.preventDefault(); 

上 

function drag(ev) 

{ 

ev.dataTransfer.setData("Text",ev.target.id); 

b 

function drop(ev) 

{ 

ev.preventDefault(); 

Var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 

</script> 

</head> 

<body> 

<p> 请 把 图 片 拖 放 到 箱 形 中 : </p> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
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<br/> 

<img id="dragl" src="images/2.gif" draggable="true" ondragstart="drag(event)" /> 
</body> 

</html> 


将 上 述 代码 保存 为 .html 格式 ， 在 下 浏览 器 中 预览 效果 ， 如 图 16-1 所 示 。 


司 HUsersAdminist PD» OX @HAUsers Administr.. x 


文件 站” 注 绢 (E) 到 看 (V) 收 荐 关 (A) 工具 [T) 帮 却 (H) 


图 16-1 预览 效果 


可 以 看 到 当选 中 图 片 后， 在 不 松 开 鼠标 的 情况 下 ， 可 以 将 其 拖 放 到 矩形 框 中 ， 如 图 16-2 
所 示 。 


各] HAUsersAdminist D ~ © X | 车 Huserswdm 
文件 (站 ” 蝙 强 (E) ”查看 (V) ” 收 功 闪 (A) 工具 (D) 帮助 (H) 


请 把 图 片 拖 放 到 矩形 中 ， 


时 


图 16-2 拖 放 图 片 
代码 解释 如 下 : 
@ 调用 preventDefault0 来 避免 浏览 器 对 数据 的 默认 处 理 ( drop 事件 的 默认 行为 是 以 链接 
形式 打开 )。 


@ 通过 dataTransfergetData("Text") 方 法 获得 被 拖 的 数据 。 该 方法 将 返回 在 setData() 方 法 
中 设置 为 相同 类 型 的 任何 数据 。 
@ 被 拖 数据 是 被 拖 元 素 的 id("drag1")。 
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@ 把 被 拖 元 素 追 加 到 放置 元 素 (目标 元 素 ) 中 。 
16.2 分 析 拖 放 的 实现 过 程 


HTML 实现 拖 放 效 果 ， 常 用 的 实现 方法 是 利用 HTML 5 新 增加 的 事件 drag 和 drop， 下 面 
就 具体 分 析 拖 放 实 现 的 过 程 。 

1. 设置 元 素 为 可 拖 放 

首先 ， 为 了 使 元 素 可 拖 动 ， 把 draggable 属性 设置 为 tue， 具 体 的 代码 如 下 : 

<img draggable="true" > 

2. 拖 动 内 容 

实现 拖 放 的 第 二 步 就 是 设置 拖 动 的 元 素 ， 常见 的 元 素 有 图 片 、 文 字 、 动 夯 等 。 实 现 拖 放 功 
能 的 是 ondragstart 和 setData()， 即 规定 当 元 素 被 拖 动 时 会 发 生 什么 。 

例如 ， 在 上 面 的 例子 中 ，ondragstart 属性 调用 了 一 个 函数 drag (event) ， 它 规定 了 被 拖 动 
的 数据 。 

dataTransfer.setData() 方 法 设置 被 拖 数 据 的 数据 类 型 和 值 ， 具 体 的 代码 如 下 : 

function drag(ev) 


{ 
ev.dataTransfer.setData("Text",ev.target.id); 


} 

在 这 个 例子 中 ， 数 据 类 型 是 Text， 值 是 可 拖 动 元 素 的 id("drag1")。 

3. 放置 位 置 

实现 拖 放 功能 的 第 三 步 就 是 将 可 拖 放 元 素 放 到 适合 位 置 ， 实 现 该 功能 的 事件 是 
ondragover， 默 认 情 况 下 ， 无 法 将 数据 /元 素 放置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ， 用 户 
必须 阻止 对 元 素 的 默认 处 理 方式 。 

这 就 需要 通过 调用 ondragover 事件 的 event.preventDefault() 方 法 ， 具 体 的 代码 如 下 : 


event.preventDefault() 

4. 进行 放置 

当 放 置 被 拖 元 素 时 ， 就 会 发 生 drop 事件 。 在 上 面 的 例子 中 ，ondrop 属性 调用 了 一 个 函数 
drop (event) ， 其 具体 的 代码 如 下 : 

function drop(ev) 

和 


ev.preventDefault(); 
Var data=ev.dataTransfer.getData("Text"); 
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ev.target.appendChild(document.getElementById(data)); 
} 


16.3 ”浏览 器 对 拖 放 功 能 的 支持 情况 
不 同 的 浏览 器 版 本 对 拖 放 功 能 的 支持 情况 是 不 同 的 ， 表 16-1 是 常见 浏览 器 对 拖 放 功 能 的 
支持 情况 。 
表 16-1 常见 浏览 器 对 拖 放 功能 的 支持 
浏览 器 名 称 支持 拖 放 功能 的 浏览 器 版 本 | 
| 严 IE 9.0 及 更 高 版 本 | 
| Firefox | Firefox 3.6 及 更 高 | 
| Opera | Opera 12.0 及 5 | 
Safari Safari 5 及 更 高 版 本 


16.4 ”综合 实例 1 一 一 在 网 页 中 拖 放 文字 


在 了 解 了 HTML 5 的 拖 放 技术 后 ， 下 面 给 出 


拖 放 文字 。 


具体 的 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 拖 放 文 字 </title> 
<style> 
body f 
font-family:'Microsoft YaHei'; 
1 
div.drag { 
background-color:#AACCFF; 
border: 1px solid #666666; 
cursor:move; 
height: 100px; 
width:100px; 
margin: 1 Opx; 
float:left: 
} 
div.drop { 


-个 具体 的 实例 ， 实 现 的 效果 就 是 在 网 页 中 
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background-color:#EEEEEE:; 
border: 1px solid #666666; 
cursor: pointer; 
height: 150px; 
width:150px; 
margin: 1 0px; 
float:left; 
} 
</style> 
</head> 
<body> 
<div draggable="true" class="drag" 
ondragstart="dragStartHandler(event)">Drag me!</div> 
<div class="drop" 
ondragenter="dragEnterHandler(event)" 
ondragover="dragOverHandler(event)" 
ondrop="dropHandler(event)">Drop here!<ol /></div> 
<script> 
var internalDNDType = 'text'; 
function dragStartHandler(event) { 
event.dataTransfer.setData(internal DNDType, 
event.target.textContent); 
event.effectAllowed = 'move'; 
} 
// dragEnter 事件 
function dragEnterHandler(event) { 
if (event.dataTransfer.types.contains(internal DNDType)) 
if (event.preventDefault) event.preventDefault();} 
/ dragOver 事件 
function dragOverHandler(event) { 
event.dataTransfer.dropEffect = 'copy'; 
if (event.preventDefault) event.preventDefault(); 
} 
function dropHandler(event) { 
var data = event.dataTransfer.getData(internal DNDType); 
var li= document.createElement(li); 
li.textContent = data: 
event.target.lastChild.appendChild(li); 
} 
</script> 
</body> 
</html> 
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下 面 介 绍 实现 拖 放 的 操作 步骤 。 
it 出 将 上 述 代 码 保存 为 .html 格式 的 文件 ， 在 IE 9.0 浏览 器 中 的 预览 效果 如 图 16-3 所 示 。 


em 


Oe oom | 


文件 月 ”六 名 (E) ”得 看 (V) 站 毫 闪 (A) 工具 (T) 才 动 (H) 


国 
| 


图 16-3 ”预览 效果 
tog 选中 左边 矩形 中 的 元 素 ， 将 其 拖 虹 到 右边 的 矩形 放 开 ， 如 图 16-4 所 示 。 


| 


CA mser oninist P- Ox] Br | 


文件 (F) ” 妨 强 (E) 豆 看 (V)】 收藏 亲 (A) 工具 和 T) 。 帮助 (H) 


号 ?9 me! 


图 16-4 ”选择 被 拖 放 文字 
3) 松 开 鼠 标 ， 可 以 看 到 拖 放 之 后 的 效果 ， 如 图 16-5 所 示 。 


[= 


OD ox es | 


16-5 拖 放 一 次 的 效果 


[出让 
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0 和 还 可 以 多 次 拖 放 文 字 元 素 ， 效 果 如 图 16-6 所 示 。 
FE 区 可 


SE HusersAdminist P - Ox | 人 jazz 


文件 ( 。 演 各 (E) 。 豆 看 (V) 收藏 突 (A) ”工具 (TD) 帮助 (H) 


Drop here! 


1. Drag mel 
2. Drag me! 
3. Drag me! 
4. Drag me! 
5. Drag me! 


图 16-6 拖 放 多 次 的 效果 


16.5 ”综合 实例 2 一 一 在 网 页 中 来 回 拖 放 图 片 


下 面 再 给 出 一 个 具体 的 实例 ， 实 现 的 效果 就 是 在 网 页 中 来 回 拖 放 图 片 。 
具体 的 代码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

#div1, #div2 

{float:left; width:100px; height:35px; margin:10px;padding: 10px:border: 1px solid #aaaaaa;} 
</style> 

<script type="text/JavaScript"> 

function allowDrop(ev) 

{ 

ev.preventDefault(); 

b 

function drag(ev) 

4 
ev.dataTransfer.setData("Text",ev.target.id); 
} 

function drop(ev) 

上 

ev.preventDefault(); 

Var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
b 


</script> 
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</head> 
<body> 


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
<img src="images/1 .gif" draggable="true" ondragstart="drag(event)" id="dragl" /> 


</div> 


<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 


</body> 
</html> 


在 记事 本 中 输入 这 些 代码 ， 


然后 将 其 保存 为 .html 格式 ， 使 用 三 9.0 浏览 器 查看 该 文件 ， 


即 可 在 页 面 中 看 到 效果 ,选中 网 页 中 的 图 片 ， 即 可 在 两 个 矩形 当中 来 回 拖 放 ， 如 图 16-7 所 示 。 


DO 


中] HAUsersAdminist D - © X | @ Hi\Use 


文件 (F) ” 编 强 (E) 。 坦 看 (V) ”收藏 夫 (A) ”工具 (T) 帮助!” 


图 16-7 预览 效果 


16.6 ”问题 解答 


1. 在 HTML 5 中 ， 实 现 拖 放 效 果 的 方法 唯一 吗 ? 
在 HTML 5 中 ， 实 现 拖 放 效果 的 方法 并 不 是 唯一 的 。 除 了 可 以 使 用 事件 drag 和 drop 外 ， 
还 可 以 使 用 利用 canvas 标签 来 实现 。 


2. 在 HTML 5 中， 可 拖 放 的 对 象 只 有 文字 和 图 像 吗 ? 
默认 情况 下 ， 图 像 、 链 接 和 文本 是 可 以 拖 动 的 ， 也 就 是 说 , 不 用 额外 编写 代码 ， 用 户 就 可 


以 拖 动 它们 。 文 本 只 有 在 被 选 


P 的 情况 下 才能 拖 动 ， 而 图 像 和 链接 在 任何 时 候 都 可 以 拖 动 。 


也 可 以 让 其 他 元 素 拖 动 ，HTML 5 为 所 有 HTML 元 素 规定 了 一 个 draggable 属性 ， 表 示 元 
素 是 否 可 以 拖 动 。 图 像 和 链接 的 draggable 属性 自动 被 设置 成 了 true， 而 其 他 元 素 这 个 属性 的 
默认 值 都 是 false。 要 想 让 其 他 元 素 可 拖 动 ， 或 者 让 图 像 或 链接 不 能 拖 动 ， 都 可 以 设置 该 属性 。 
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HTML 5 规范 定义 了 Server-Sent Event 和 Web Socket 两 个 特性 ， 为 浏览 器 变 成 一 个 RIA 

(Rich Internet Applications, 富 互联 网 应 用 ) 客户 端 平 台 提供 了 强大 的 支持 , 使 用 这 两 个 特性 ， 

可 以 帮助 服务 器 将 数据 “推送 ”到 客户 端 浏 览 器 。 本 章节 主要 讲述 服务 器 发 送 事 件 的 基本 概念 、 
服务 器 发 送 事件 的 实现 过 程 等 。 


17.1 服务 器 发 送 事件 概述 


在 网 页 客户 端 更 新 过 程 中 ,如 果 使 用 早期 技术 ,网 页 不 得 不 询问 是 否 有 可 用 的 更 新 ,这 样 
将 不 能 很 好 地 、 实 时 地 获取 服务 器 的 信息 ， 并 且 加 大 了 资源 的 耗费 。 在 HTML 5 中 ， 通 过 服 
务 器 发 送 事件 ， 可 以 让 网 页 客户 端 自动 获取 来 自 服务 器 的 更 新 。 

服务 器 发 送 事件 (Server-Sent Event) 允许 网 页 获得 来 自 服务 器 的 更 新 ， 这 种 数据 的 传递 


和 前 面 讲 述 的 Web Socket 不 同 。 服 务 器 发 送 事件 是 单 向 传递 信息 ， 服 务 器 将 更 新 的 信息 自动 
发 送 到 客户 端 ， 而 Web Socket 是 双向 通信 技术 。 
目前 ， 常 见 浏 览 器 对 Server-Sent Event 的 支持 情况 如 表 17-1 所 示 。 


表 17-1 浏览 器 对 Server-Sent Event 的 支持 


浏览 器 名 称 支持 Server-Sent Event 的 浏览 器 版 本 


Opera Opera 12.0 及 更 高 版 本 
Chrome 5 及 更 高 版 本 


17.2 ”服务 器 发 送 事件 的 实现 过 程 


了 解 完 服务 器 发 送 事件 的 基本 概念 后 ， 下 面 来 学 习 实现 过 程 。 
17.2.1 检测 浏览 器 是 否 支持 Server-Sent Event 
首先 可 以 检查 客户 端 浏览 器 是 否 支 持 Server-Sent 事件 。 代 码 如 下 : 


if(typeof(EventSource)!=="undefined") 
{ 
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// 浏览 器 支持 的 情况 
bs 


else 


{ 
// 对 不 起 ， 您 的 浏览 器 不 支持 .….… 
| 


户 在 代码 中 设置 提示 信息 ， 这 样 如 果 浏 览 者 的 客户 端 不 支持 ， 将 会 显示 提示 信息 。 
17.2.2 ”EventSource 对 象 


在 HTML 5 中 的 服务 器 发 送 事件 中 ， 使 用 EventSource 对 象 接收 服务 器 发 送 事件 的 通知 。 
该 对 象 的 事件 含义 如 表 17-2 所 示 。 


表 17-2 EventSource 对 象 的 事件 及 含义 


事件 名 称 含义 
onopen 当 连 接 打开 时 触发 该 事件 


当 收 到 信息 时 触发 该 事件 


当 连 接 关闭 时 触发 该 事件 


在 事件 处 理 函数 中 ， 可 以 通过 使 用 readyState 属性 检测 连接 状态 ， 主 要 有 三 种 状态 ， 如 表 
17-3 所 示 。 


表 17-3 readyState 属性 状态 


状态 名 称 


er 
| opPEN | 1 | 连接 已 经 建立 ， 正 在 委派 事件 


例如 ， 下 面 的 代码 就 是 使 用 了 onmessage 的 实例 : 


Var source=new EventSource("/123.php"); 
source.onmessage=function(event) 


{ 


document.getElementByld("result").innerHTML+=event.data + "<br />"; 


}; 


其 中 ,该 代码 创建 一 个 新 的 EventSource 对 象 ， 然 后 规定 发 送 更 新 页 面 的 URL (本 例 中 是 
w123.php") 。 每 接收 到 一 次 更 新 ， 就 会 发 生 onmessage 事件 。 当 onmessage 事件 发 生 时 ， 把 
已 接收 的 数据 推 入 id 为 result 的 元 素 中 。 


17.2.3 ”服务 器 端 代码 
为 了 让 上 面 的 例子 可 以 运行 ， 还 需要 能 够 发 送 数据 更 新 的 服务 器 〈 比 如 PHP 和 ASP) 。 
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服务 器 端 事件 流 的 语法 非常 简单 ， 把 "Content-Type" 报 头 设置 为 "text/event-stream"， 就 可 以 


始 发 送 事件 流 了 。 
如 果 服 务 器 是 PHP， 则 服务 器 的 代码 如 下 


<2php 

header('Content-Type: text/event-stream'); 
header('Cache-Control: no-cache'); 

Stime = date(r); 

echo "data: The server time is: {$time} \n\n"; 
flush(); 

?> 


如 果 服 务 器 是 ASP， 则 服务 器 的 代码 如 下 : 


<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 
Response.Write("data: " & now()) 
Response.Flush() 

%> 


上 面 的 代码 中 , 把 报头 "Content-Type" 设 置 为 "text/event-stream", 规定 不 对 页 面 进行 缓存 ， 


输出 发 送 日 期 (始终 以 "data: " 开头 ) ， 向 网 页 刷新 输出 数据 。 
17.3 综合 实例 


下 面 通过 一 个 综合 的 案例 ， 详 细 介 绍 整个 代码 的 操作 过 程 。 
io 出 首先 创建 运行 主页 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset=\"UTF-8\"> 

</head> 

<body> 

<h1> 获 得 服务 器 更 新 </hl> 

<div id="result"> 

</div> 

<script> 

if(typeof(EventSource)!=="undefined") 
| 
Var source=new EventSource("/123.php"); 
source.onmessage=function(event) 


{ 


向 服务 器 端 发 送 事件 


document.getElementById("result").innerHTML+=eventdata + "<br />"; 
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相 
} 
else 
{ 
document.getElementById("result").innerHTML=" 对 不 起 ,您 的 浏览 器 不 支持 服务 器 发 送 事 件 ..."; 
} 
</script> 
a 
</html> 


(0) emt vr a rs 
否则 会 乱码 或 无 数据 。 
提 示 


to3 编写 服务 器 端 文件 123.php， 代 码 如 下 : 


<2zphp 

error_reporting(E_ALL); 

/注意 : 发 送 包头 定义 MIMIE 类 型 (header 部 分 ) ， 是 实现 服务 器 推送 信息 必需 的 代码 (MIMIE 类 型 定 
义 了 事件 框架 格式 》 

header(\"Content-Type:text/event-stream\"); 

echo 'data: 服 务 器 第 一 次 发 送 数 据 "\"\n\"; 

echo 'data: 服 务 器 第 二 次 发 送 数 据 "\"\n\"; 

?> 


【 输出 的 格式 必须 为 data:value 格式 ， 这 是 text/event-tream 格式 规定 。 
提 示 
93j 在 下 浏览 器 中 的 访问 主页 文件 效果 如 图 17-1 所 示 。 
全 忆 ]| 
GO cswizgno 司 可 |X][ 


文件 EE) 。 力 钻 开 ) 查看 收 蕊 天 内 ) 工具 CD) 帮助 人 
DT 收 蕊 天 。 疙 EE\ 旧 面 \ 工 作 表 2013\htal5 ”新 增 内 容 \ 畏 通 IT 


获得 服务 器 更 新 


对 不 起 ， 您 的 浏览 器 不 支持 服务 器 发 送 事件 . .. 


图 17-1 代码 运行 效果 


to 唤 在 Firefox 浏览 器 中 的 访问 主页 文件 效果 如 图 17-2 所 示 。 服 务 器 每 隔 一 段 时 间 推 送 
一 个 此 数据 。 
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3) Wozilla Firefox 
文件 E) 编辑 E) 查看 @ 历史 (5) 书签 中 工具 CD) 和 才 助 0 
站) file:///E:/ 桌 面 /… 新 增 章节 /17.1.htnl ji 二 


获得 服务 器 更 新 


服务 器 第 一 次 发 送 数据 
服务 器 第 二 次 发 送 数据 


图 17-2 ”代码 运行 效果 
17.4 ”问题 解答 


1. 如 何 编写 JSP 的 服务 器 端 代码 ? 
如 果 服 务 器 端 是 JSP， 服 务 器 的 代码 段 如 下 : 


<%(@ page contentType="text/event-stream; charset=UTF-8"%> 

<% 
response.setHeader("Cache-Control", "no-cache"); 
out.print("data: >>server Time" + new java.util.Date() ); 
out.flush(); 

%> 


其 中 ， 编 码 要 采用 统一 的 UTF-8 格式 。 

2. 如 何 优 化 服务 器 端 代 码 ? 

EventSource 对 象 是 一 个 不 间 吹 运行 的 程序 ， 时 间 一 长 会 消耗 大 量 的 资源 ， 甚 至 导致 客户 
端 浏 览 器 骨 溃 ， 那 么 如 何 优化 执行 代码 呢 ? 

在 HTML 5 中 使 用 Web Workers 优化 JavaScript 执行 复杂 运算 、 重 复 运算 和 多 线程 运算 ， 
对 于 执行 时 间 长 、 消 耗 内 存 多 的 JavaScript 程序 代码 最 为 有 用 。Web Workers 的 使 用 方法 请 参 
照 第 12 章 的 内 容 。 


第 18 章 HTML 5、CSS3 和 
JavaScript 搭配 应 用 


网 页 吸引 人 之 处 ， 莫 过 于 具有 动态 效果 ， 利 用 CSS 伪 类 元 素 可 以 轻易 实现 超级 链接 的 动 
态 效果 .不 过 利用 CSS 能 实现 的 动态 效果 非常 有 限 。 在 网 页 设计 中 , 还 可 以 将 CSS 与 JavaScript 
结合 ， 创 建 出 具有 动态 效果 的 页 面 。 


所 


18.1 综合 实例 1 一 一 打字 效果 的 文字 


文字 是 网 页 的 灵魂 ,没有 文字 的 网 页 ,不 管 特效 多 么 绚丽 多 彩 必定 没有 任何 实际 意义 。 文 
字 特 效 始终 是 网 页 设计 追求 的 目标 ， 通 过 JavaScript 可 以 实现 多 个 网 页 特效 。 文 字 的 打字 效果 
是 JavaScript 脚本 程序 ， 将 预先 设置 好 的 文字 逐一 在 页 面 上 显示 出 来 。 有 具体 步骤 如 下 所 示 。 


I 分析 需求 。 如 果 要 在 网 页 中 实现 打字 效果 ， 需 要 创建 预先 设置 好 的 文字 ， 作 为 输出 
信息 。 该 实例 完成 的 效果 如 图 18-1 所 示 。 


es- 
【€) | cvsrcavchlel67html EEEIE PE x ] A 


松 风水 月 最 新 沿 博 信息 : 关心 身体 ,就 是 关心 自己 


图 18-1 打字 效果 
to3 创建 HTML 页 面 ， 设 置 页 面 基本 样式 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 打 字 效 果 的 文字 </title> 

<style type="text/css"> 

body {font-size: 14px;font-weight:bold;} 

</style> 

</head> 

<body> 

松 风水 月 最 新 微 博 信息 : <a id="HotNews" href="" target="_blank"></a> 
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上 面 代码 中 ， 在 <head> 标 记 中 间 设 置 body 页 面 的 基本 样式 ， 例 如 字体 大 小 为 14 像素 ， 
字形 加 粗 ， 并 在 body 页 面 创建 了 一 个 超级 链接 。 
在 IE 9.0 中 浏览 效果 如 图 18-2 所 示 ， 可 以 看 到 页 面 中 只 显示 了 一 个 提示 信息 。 


司 px 淹 R 双 Nhl6\167html PdGx| siseezz x 
加 


18-2 页 面 基 本 样式 
添加 JavaScript 代码 ， 实 现 打字 特效 : 
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Dewsi++; 
if(newsi>=newstitle.length){ 
newsi=0 
} 
newstimer = setInterval("shownew()",NewsTime); 
txti= 0; 
return; 
} 
clearInterval(txttimer); 
document.getElementById("HotNews").href=newslink; 
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr; 
txtit+; 
txttimer = setInterval("shownew()",TextTime); 
hk 
shownew(); 
1/--> 
</SCRIPT> 


因为 上 面 代码 是 一 个 整体 ,这 里 就 不 分 开 介绍 了 。 在 JavaScript 代 码 中 ,主要 调用 shownew() 
函数 完成 打字 效果 。 在 JavaScript 代码 开始 部 分 ， 定 义 了 多 个 变量 ， 其 中 数组 对 象 newstitle 用 
于 存放 文本 标题 。 下 面 创建 shownew0 函 数 ， 并 在 函数 中 通过 变量 和 条 件 获取 要 显示 的 文字 
通过 “setInterval("shownew()",NewsTime)” 语 句 输出 文字 内 容 。 代 码 最 后 使 用 shownew() 语 句 
循环 执行 该 函数 中 的 输出 信息 。 

在 IE 9.0 中 的 浏览 效果 如 图 18-3 所 示 , 可 以 看 到 页 面 中 每 隔 一 定时 间 , 会 在 提示 信息 后 ， 
逐个 打出 单个 文字 ， 字 体 颜 色 为 蓝 色 。 


本 瑟 加 
[¢ 同 国 o 源 Rhl667html DGx| Brmms x 


松 风水 月 最 新 油 博 信息 : 健康 是 身体 的 本 铺 


图 18-3 ”实现 打字 效果 


18.2 综合 实例 2 一 一 文字 升降 特效 


有 的 网 页 为 了 加 大 广告 宣传 力度 , 往往 在 网 页 上 设置 一 个 自动 升降 的 文字 , 用 于 吸引 人 的 
注意 力 。 当 单 击 这 个 升降 文字 时 ， 会 自动 跳 转 到 宣传 页 面 。 本 实例 将 使 用 JavaScript 和 CSS 
实现 文字 升降 效果 。 具 体 步骤 如 下 所 示 。 


(QU 分 析 需 求 。 如 果 需 要 实现 文字 升降 ， 需 要 指定 文字 内 容 和 文字 升降 范围 ， 即 为 文字 
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在 HTML 页 面 指定 一 个 层 ， 用 于 升降 文字 。 实 例 完成 后 ， 实 际 效果 如 图 18-4 所 示 。 


图 18-4 文字 升降 
t03 创建 HTML， 构 建 升降 DIV 层 ， 代 码 如 下 : 


上 面 的 代码 创建 了 一 个 DIV 层 ， 用 于 存放 升降 的 文字 ， 层 的 ID 名 称 是 napis， 并 在 层 的 
style 属性 中 定义 了 层 显示 样式 ， 例 如 字体 大 小 、 带 有 边框 、 字 形 等 。 在 DIV 层 中 创建 了 超级 
链接 ， 并 设 定 了 超级 链接 的 样式 。 其 中 的 script 代码 用 于 定时 调用 start 函数 。 在 下 9.0 中 的 浏 
览 效 果 如 图 18-5 所 示 ， 可 以 看 到 页 面 空白 ， 无 文字 显示 。 


图 18-5 空白 页 面 
3| 添加 JavaScript 代码 ， 实 现 文字 升降 ， 代 码 如 下 : 


“282。 
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<script language="JavaScript"> 

es 

done = 0; 

step=4 

function anim(yp,yk) 

1 

if(document.layers) document.layers["napis"].top=yp; 
else document.all["napis"].style.top=yp; 
if(yp>yk) step = -4 

if(yp<60) step = 4 
setTimeout('anim('+(yp+step)+' ,+ykt) 35); 
}function start() 

| 

if(done) return 

done= 1; 
ifnavigator.appName 一 "Netscape") { 

var nap=document.getElementById("napis"); 
nap.left=innerWidth/2 - 145; 
anim(60,innerHeight - 60) 

} 

else { 

napis.style.left=11; 
anim(60,document.body.offsetHeight - 60) 
}1/-> 

</script> 


上 面 的 代码 创建 了 anim0 和 start0 函 数 ， 其 中 anim0 函 数 用 于 设 定 每 次 升降 的 数值 ，start() 
函数 用 于 设 定 每 次 开始 的 升降 的 坐标 。 在 正 9.0 中 浏览 效果 如 图 18-6 所 示 ， 可 以 看 到 页 面 中 
超级 链接 自动 上 下 移动 。 


= 三 辆 
< EC rr] D- Cx [Berxsma 全 区 


水 月 上 而 店 ， 牙 和 下 过 1 


图 18-6 上 下 移动 
18.3 ”综合 实例 3 一 一 跑马 灯 效 果 


网 页 中 有 一 种 特效 称 为 跑马 灯 , 即 文字 从 左 向 右 自 动 输出 ， 和 晚上 写字 楼 的 广告 霓虹灯 非 
常 相 似 。 在 网 页 中 ， 如 果 CSS 样式 设计 非常 完美 ， 就 会 产生 更 加 靓丽 的 网 页 效果 。 有 具体 步骤 


HTML 5 


如 下 。 


9 分 析 需 求 。 完成 跑马 灯 效 果 ， 需 要 使 用 JavaScript 语言 设置 文字 内 容 、 移 动 速度 和 相 
应 输入 框 ， 使 用 CSS 设置 显示 文字 样式 。 输 入 框 用 来 显示 水 平移 动 文字 。 实 例 完 成 后 ， 实 际 
效果 如 图 18-7 所 示 。 


4 DRYhios shim Paxl sa > 上 ER 


| 黄河 风景 ” 品味 中 原文 | 


图 18-7 马 灯 效果 
tog 创建 HTML， 实 现 输入 表单 ， 代 码 如 下 : 


“/bod 


上 面 代码 非常 简单 ， 先 创建 表单 ， 并 在 表单 中 存放 文本 域 ， 用 于 显示 移动 文字 。 在 IE 9.0 
中 浏览 效果 如 图 18-8 所 示 ， 可 以 看 到 页 面 中 只 是 存在 一 个 文本 域 ， 没 有 其 他 显示 信息 。 


图 18-8 ”实现 基本 表单 
tj 添加 JavaScript 代码 ， 实 现 文字 移动 ， 代 码 如 下 : 
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function LenScrollO { 
document.nextForm.lenText.value = msg.substring(seq, msg.length) +" "+msg; 
Seq++; 
让 (seq >msg.length ) 
Seq= 0; 
window.setTimeout("LenScroll();", interval); 
} 
</script> 


上 面 代码 中 ， 创 建 了 一 个 变量 msg， 用 于 定义 移动 的 文字 内 容 ， 变 量 interval 用 于 定义 文 
字 移 动 速度 ，LenScroll0) 函 数 用 于 在 表单 输入 框 中 显示 移动 信息 。 

在 IE 9.0 中 的 浏览 效果 如 图 18-9 所 示 ， 可 以 看 到 输入 框 中 显示 了 移动 信息 ， 并 且 从 右 向 
左 移动 。 


人 EE re] PD- ox|S m3 


可 风景 。 品味 中 原文 化 ， 


图 18-9 ”实现 移动 效果 
to 绚 添加 CSS 代码 ， 修 饰 输入 框 和 页 面 ， 代 码 如 下 : 


<style type="text/css"> 
<!-- 
body{ 
background-color:#FFFFFF; ”人 * 页 面 背 景色 */ 
b 
input{ 
background:transparent;  /*# 输入 框 背景 透明 */ 
border:none; 上 # 无 边框 */ 
color:#ffb400; 
font-size:45px; 
font-weight:bold; 
font-family: 黑 体 ; 
}--></style> 


上 面 代码 设置 了 页 面 背景 颜色 为 白色 ， 在 input 标记 选择 器 中 ， 定 义 了 边框 背景 为 透明 ， 
无 边框 ,字体 颜色 为 黄色 ， 大 小 为 45 像素 ,加 粗 、 黑 体 显示 。 在 正 9.0 中 浏览 效果 如 图 18-10 
所 示 ， 可 以 看 到 页 面 中 比 原来 页 面 的 字体 变 大 ， 颜 色 为 黄色 ， 没 有 输入 框 显示 。 
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【< EC Dcx]Swar 


情 黄河 风景 ” 品味 中 上 摆 


图 18-10 最 终 效果 
18.4 ”综合 实例 4 一 一 闪烁 图 片 


图 片 闪烁 是 常用 的 一 种 特效 ， 用 JavaScript 实现 起 来 非常 简单 ， 需 要 注意 时 间 间 隔 这 个 参 
数 , 数值 越 大 闪烁 越 不 连续 ,数值 越 小 闪烁 越 历 害 ,可 以 随意 更 改 这 个 值 , 直到 取得 满意 效果 。 
具体 步骤 如 下 所 示 。 


0 分 析 需 求 。 将 图 片 放 在 一 个 DIV 层 上 ， 设 定 图 片 为 可 见 的 ， 然 后 使 用 JavaScript 程 
序 代 码 设置 DIV 层 的 显示 和 隐藏 ,这样 就 达到 了 图 片 的 闪烁 效果 .实例 完成 后 ,效果 如 图 18-11 
所 示 。 


图 18-11 闪烁 效果 
to3 创建 HTML 页面， 构建 DIV 层 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 闪 烁 图 片 <title> 

</head> 

<body ONLOAD="soccerOnload()" topmargin="0"> 
<DIV ID="soccer" STYLE="position:absolute; left:150; top:0"> 
<ahref=""> 

<IMG SRC="feng.jpg" border="0"></a> 

</DIV> 

</body> 

</html> 


上 面 代码 中 ,创建 了 一 个 层 ， 其 ID 名 称 为 soccer， 样 式 为 绝对 定位 ， 坐 标 位 置 为 (150,0)。 
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然后 在 层 中 创建 一 个 图 片 ， 不 带 边 框 。 在 下 9.0 中 的 浏览 效果 如 图 18-12 所 示 ， 可 以 看 到 显示 
一 个 图 片 ， 不 具有 闪烁 效果 。 


图 18-12 图 片 
tj 添加 JavaScript 代码 ， 实 现 图 片 闪烁 ， 代 码 如 下 : 


<SCRIPT LANGUAGE="JavaScript"> 

var msecs = 500; /改变 时 间 得 到 不 同 的 闪烁 间隔 ; 
Var counter = 0; 

function soccerOnload() { 

setTimeout("blink()", msecs); 

} 

function blink() { 

soccer.style.visibility = 

(soccer.style.visibility 一 "hidden") ? "visible" : "hidden"; 
counter +=1; 

setTimeout("blink()", msecs); 

} 

</SCRIPT> 


在 JavaScript 代码 中 ， 创 建 变 量 msecs 用 于 定义 闪烁 时 间 间 隔 ， 创 建 变量 counter 用 于 计 
数 。 在 函数 soccerOnload() 中 设 定 每 隔 指定 时 间 图 片 闪 烁 一 次 ， 函 数 blink0 用 于 设 定 图 片 显示 
方式 ， 即 层 是 隐藏 还 是 可 见 。 

在 IE 9.0 中 的 浏览 效果 如 图 18-13 所 示 ， 可 以 看 到 显示 一 个 图 片 ， 在 指定 时 间 内 闪烁 。 


图 18-13 ”最 终 效果 


eras 
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18.5 ”综合 实例 5 一 一 左右 移动 的 图 片 


在 广告 栏 中 , 经 常会 有 从 右 到 左 移动 或 者 从 左 到 右 移动 的 图 片 , 一 张 或 者 多 张 , 不 但 增加 
了 页 面 效果 , 也 有 提升 广告 效应 的 作用 。 本 实例 将 使 用 JavaScript 和 CSS 创建 一 个 左右 移动 的 
图 片 。 具 体 步骤 如 下 所 示 。 
(QU 分 析 需 求 。 实现 左右 移动 的 图 片 ， 需 要 在 页 面 上 定义 一 张 图 片 ， 然 后 利用 JavaScript 
程序 代码 ， 获 取 图 片 对 象 ， 并 使 其 在 一 定 范围 内 ， 即 水 平方 向 上 自由 移动 。 实例 完成 ， 效 果 如 
图 18-14。 


【¢ 加 站 DAfe3\ch16\16.11html EE EE 


图 18-14 ”图片 移 动 
四 2 创建 HTML 页 面 ， 导 入 图 片 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 左 右 移 动 图 片 </title> 

</head> 

<body> 

<img src="feng.jpg" name="picture" 
style="position: absolute; top: 70px:; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40"> 
<script LANGUAGE="JavaScript"><!-- 
setTimeout("moveLR('picture',300,1)",10); 
//--></script> 

</body> 

</html> 


上 面 代码 中 ， 定 义 了 一 张 图 片 ， 为 绝对 定位 ， 左 边 位 置 是 (70,30) 无 边框 ， 宽 度 为 140 


像素 ， 高 度 为 40 像素 。script 标记 中 ， 使 用 setTimeout 方法 ， 定 时 移动 图 片 。 
在 IE 9.0 中 浏览 效果 如 图 18-15 所 示 ， 可 以 看 到 网 页 上 显示 一 个 图 片 。 


图 18-15 图 片 显示 
to 加 入 JavaScript 代码 ， 实 现 图 片 左右 移动 ， 代 码 如 下 : 
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X=Number(x1.substring(0,xl.length-2)); // 30px ->30 

if(c—=0)f 

if (movingarea width == 0) { 

right_ margin = window_width - image width; 

anim(x,right margin,1); 

} 

else { 

right_margin =x + movingarea width - image width; 

if (movingarea width< x + image width) window.alert("No space for moving!"); 
else anim(x,right margin,1); 

} 

} 

else { 

让 (movingarea_width == 0) right_margin = window_width - image_width; 

else 了 

x= Math.round((window_width-movingarea_ width)/2); 

right_margin = Math.round((window_width+movingarea_ width)/2)-image_width; 
} 

anim(x,right_margin,1); 

} 


} 
//-></script> 


上 面 代 码 和 文字 水 平方 向 移动 原理 基本 相同 ， 只 是 对 象 不 同 ， 这 里 不 再 介绍 。 
在 IE 9.0 中 浏览 效果 如 图 18-16 所 示 , 可 以 看 到 网 页 上 显示 一 张 图 片 ， 并 在 水 平方 向 上 自 
由 移动 。 
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图 18-16 最 终 效果 
18.6 ”综合 实例 6 一 一 向 上 滚动 菜单 
网 页 中 包含 信息 比较 多 的 时 候 ， 需 要 设计 出 一 些 导 航 菜单 来 实现 页 面 导 航 。 如 果 使 


JavaScript 代码 将 菜单 做 成 动态 效果 ， 菜单 会 更 加 吸引 人 。 本 实例 将 结合 前 面 学 习 的 内 容 ， 创 
建 一 个 向 上 深 动 的 菜单 。 具 体 步骤 如 下 : 
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@ 分 析 需 求 。 实 现 菜单 自动 从 下 到 上 滚动 ， 需 要 把 握 两 个 元 素 ， 一 个 是 使 用 JavaScript 
实现 要 滚动 的 菜单 ， 即 导航 栏 ， 另 一 个 是 使 用 JavaScript 控制 菜单 移动 方向 。 实 例 完 成 后 ， 效 
果 如 图 18-17 所 示 。 


18-17 菜单 滚动 


四 2 构建 HTML 页 面 ， 代 码 如 下 : 


/bod: 


上 面 的 代码 比较 简单 ， 只 实现 了 一 个 空白 页 面 ， 页 面 背景 色 为 白色 ， 前 景色 为 黑色 。 
在 IE 9.0 中 浏览 效果 如 图 18-18 所 示 ， 可 以 看 到 显示 了 一 个 空白 页 面 。 


图 18-18 空白 HTML 页 面 
to3j 加 入 JavaScript 代码 ， 实 现 菜单 滚动 ， 代 码 如 下 : 
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link[4] =time2.htm' 
link[S] =time3.htmy' 

link[6] =timel.htm' 

link[7] =time2.htmy 

link[8] ="time3.htm' 

text= new Array(8); 

text[0] = 首页 ' 

text[1] = 产品 天 地 ' 

text[2] =' 关 于 我 们 ' 

text[3] =' 资 讯 动 态 ' 

text[4] =' 服 务 支持 ' 

text[5] =' 会 员 中 心 ' 

text[6] =' 网 上 商城 ' 

text[7] =' 官 方 微 博 ' 

text[8] =' 企 业 文 化 ' 

document.write ("<marquee scrollamount='1' scrolldelay= 100' direction= "up' width 一 150' height="150>"); 
for (i=0;i<index;i++) 


{ 
document.write ("&nbsp;<img src='dian3.gif width='l2' height='l2'><a href="+link[i]j+" 
target=! blank>"); 
document.write (text[i] + "</A><br>"); 
} 
document.write ("</marquee>") 
// --></script> 


上 面 代码 创建 了 两 个 数组 对 象 link 和 text， 用 来 存放 菜单 链接 对 象 和 菜单 内 容 ， 在 
JavaScript 代码 中 ， 使 用 <marquee> 定 义 页 面 在 垂直 方向 上 下 移动 。 
在 IE 9.0 中 浏览 效果 如 图 18-19 所 示 ， 可 以 看 到 面 左 侧 有 一 个 菜单 ， 自 下 向 上 自由 移动 。 
琴 语 画 | 
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图 18-19 最 终 效果 
18.7 ”综合 实例 7 一 一 跟随 鼠标 移动 的 图 片 


在 众多 网 站 中 ,特别 是 游戏 网 站 或 小 型 商业 网 站 ,都 喜欢 用 鼠标 图 片 跟随 的 特效 ， 一 方面 
可 以 在 鼠标 指针 旁边 加 上 网 站 说 明 的 相关 信息 或 者 欢迎 信息 ; 另 一 方面 也 吸引 人 的 注意 力 , 使 
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其 更 加 关注 此 类 网 站 。 本 实例 实现 图 片 跟随 鼠标 移动 的 特效 ， 具 体 步骤 如 下 所 示 。 

虽 和 分析 需求 。 需要 通过 JavaScript 获取 鼠标 指针 的 位 置 ， 并且 动态 地 调整 图 片 的 位 置 。 
图 片 需要 通过 position 的 绝对 定位 ， 很 容易 得 到 调整 。 采 用 CSS 的 绝对 定位 是 JavaScript 调整 
页 面 元 素 常用 的 方法 ， 效 果 如 图 18-20 所 示 。 
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图 18-20 图 片 移动 
I02) 创建 基本 HTML 页 面 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html > 

<head> 

<title> 随 鼠标 移动 的 图 片 </title> 
</head> 

<body> 

</body> 

</html> 


03j 添加 JavaScript 代码 ， 实 现 图 片 随 鼠标 移动 ， 代 码 如 下 : 


<script type="text/JavaScript"> 
function badAD(html){ 
var ad=document.body.appendChild(document.createElement('div')); 
ad.style.cssText="border:lpx solid #000;background:#FFF;position:absolute;padding:4px 4px ‘4px 
4px;font: 12px/1.5 verdana;"; 
ad.innerHTML=htmlll'This is bad idea!'; 
var c=ad.appendChild(document.createElement(span )); 
c.innerHTML="x"; 
c.style.cssText="position:absolute;right:4px;top:2px;cursor:pointer"; 
c.onclick=function (){ 
document.onmousemove=null; 
this.parentNode.style.left 一 -99999px' 
; 
document.onmousemove=function (e){ 
e=ell|window.event; 
Var x=e.clientX,y=e.clientY; 
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setTimeout(function() { 
if(ad.hover)return; 
ad.style.left=x+5+'px'; 
ad.style.top=y+5+'px"; 
},120) 


ad.onmouseover=function (){ 
this.hover=true 
B 
ad.onmouseout=function (){ 
this.hover=false 
上 
} 
badAD('<img src="18.png">) 
</script> 


上 面 代码 中 ， 使 用 appendChild0 方 法 为 当前 页 面 创建 了 一 个 DIV 对 象 ， 并 为 DIV 层 设 置 
了 相应 样式 。 下 面 的 e.clientX 和 e.clientY 语句 确定 鼠标 位 置 ， 并 动态 调整 图 片 位 置 ， 从 而 实 
现 图 片 移动 效果 。 在 正 9.0 中 的 浏览 效果 如 图 18-21 所 示 ， 可 以 看 到 鼠标 在 页 面 移动 时 ， 图 片 


跟着 移动 。 
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图 18-21 最 终 效果 


18.8 综合 实例 8 一 一 树 形 菜单 


作为 首页 , 其 特点 之 一 是 需要 导航 的 页 面 很 多 , 有 时 为 了 效果 不 得 不 将 所 有 需要 导航 的 部 
分 都 放 到 一 个 导航 菜单 中 。 树 形 导航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 。 本 实例 将 创建 一 个 


树 形 菜单 ， 具 体 步骤 如 下 所 示 。 


(OU 分 析 需 求 。 实 现 一 个 树 形 菜单 ， 需 要 3 个 方面 配合 ， 一 个 是 <ul> 无 序列 表 ， 用 于 显 
示 的 菜单 ， 一 个 是 CSS 样式 ， 修 人 饰 树 形 菜单 样式 ， 一 个 是 JavaScript 程序 ， 实 现 单 击 时 展开 


菜单 选项 。 实 例 完 成 后 ， 效 果 如 图 18-22 所 示 。 


HTML 5、CSS3 和 JavaScript 搭配 应 用 第 18 章 


CS os 


图 18-22 树 形 菜单 
02] 创建 HTML 页 面 ， 实 现 菜单 列表 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html > 
<head> 
<title> 树 形 菜单 </title> 
</head> 
<body> 
<ulid="menu zzjs_net"> 
<li> 
<label><a hre 全 "JavaScript::"> 计 算 机 图 书 </a></label> 
<ul class="two"> 
<li> 
<label><a hre 伍 "JavaScript:;"> 程 序 类 图 书 </a></label> 
<ul class="two"> 
<li> 
<label><input type="checkbox" value="123456"><a hre 伍 "JavaScript::">Java 类 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a href="JavaScript:;'">Java 语言 类 图 像 
</a></label></li> 
<l> 
<label><input type="checkbox" value="123456"><a href="JavaScript:;">Java 框架 类 图 像 
</a></label> 
<ul class="two"> 
<li> 
<label><input type="checkbox" value="123456"><a href="JavaScript:;">Struts2 图 书 </a></label> 
<ul class="two"> 
<li><label><input type="checkbox" value="123456"><a href="JavaScript:;">Strutsl</a></label> 
</i> 
<li><label><input type="checkbox" value="123456"><a href="JavaScript:;">Struts2</a></label> 
</i> 
</u> 


/bc 


在 IE 9.0 中 浏览 效果 如 图 18-23 所 示 , 可 以 看 到 无 序列 表 在 页 面 上 显示 , 并 且 显 示 全 部 元 
素 ， 字 体 颜色 为 蓝 色 。 


图 18-23 无 序列 表 
tj 添加 JavaScript 代码 ， 实 现 单 击 展 开 ， 代 码 如 下 : 
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return el.attachEvent('on'+name,fn); 
} 
function nextnode(node){/ 寻 找 下 一 个 兄弟 并 剔除 空 的 文本 节点 
ifInodejreturn ; 
if(node.nodeType — 1) 
return node; 
if(node.nextSibling) 
return nextnode(node.nextSibling); 
} 
function prevnode(node){// 寻 找 上 一 个 兄弟 并 剔除 空 的 文本 节点 
if(Inode)return ; 
if(node.nodeType — 1) 
return node; 
if(node.previousSibling) 
return prevnode(node.previousSibling); 


上 
function parcheck(self,checked){// 递 归 寻 找 父亲 元 素 ， 并 找到 input 元 素 进行 操作 


varpar= prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar; 
if(par&&par.getElementsByTagName('input )[0]){ 
par.getElementsByTagName('input )[0l.checked = checked; 
parcheck(par.getElementsByTagName('input)[0],sibcheck(par.getElementsByTagName('input)[0])); 
} 


} 
function sibcheck(self){// 判 断 兄弟 节点 是 否 已 经 全 部 选中 


var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0; 
for(var i=0;i<sbi.length;i++){ 
ifsbi[i].nodeType != 1)// 由 于 孩子 结 点 中 包括 空 的 文本 节点 ， 所 以 这 里 累计 长 度 的 时 候 也 要 算 上 去 
else if(sbili].getElementsByTagName('input )[0].checked) 
n++; 
} 
return n=—sbi.length?true:false; 
} 
addEvent(document.getElementById('menu_zzjs_net'),'click',function(e){// 绑 定 input 单 击 事件 ， 使 用 
menu_zzjs_net 根 元 素 代理 
e=ellwindow.event' 
Var target = e.targetlle.srcElement: 
var tp = nextnode(target.parentNode.nextSibling); 
Switch(targetnodeName){ 
case 'A':// 单 击 A 标签 展开 和 收缩 树 形 目录 ， 并 改变 其 样式 会 选中 checkbox 
if(tp&&tp.nodeName 一 "UL ){ 
if(tp.style.display != "block ){ 
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tp.style.display = "block'; 
prevnode(target.parentNode.previousSibling).className = 'ren' 
}else{ 
tp.style.display = 'none'; 
prevnode(target.parentNode.previousSibling).className = 'add' 
} 
} 
break:; 
case 'SPAN':// 单 击 图 标 只 展开 或 者 收缩 
var ap = nextnode(nextnode(target.nextSibling).nextSibling); 
if(ap.style.display != 'block’ ){ 
ap.style.display = "block'; 
target.className = Ten' 
jelsef 
ap.style.display = 'none'; 
target.className = 'add' 
} 
break; 
case TINPUT':// 单 击 checkbox， 父 亲 元 素 选 中 ， 则 孩子 节点 中 的 checkbox 也 同时 选中 ， 孩 子 结 点 取消 
父 元 素 随 之 取消 
if(target.checked){ 
if(tp){ 
var checkbox = tp.getElementsByTagName('input'); 
for(var i=0;i<checkbox.length;i++) 
checkbox[il.checked = true; 
} 
jelsef 
这 tp){ 
Var checkbox = tp.getElementsByTagName('input'); 
for(var i=0;i<checkbox.length;i++) 
checkbox[i].checked = false; 
} 
} 
parcheck(target,sibcheck(target));// 当 孩子 结 点 取消 选中 的 时 候 调 用 该 方法 递归 其 父 节 点 的 checkbox 
逐一 取消 选中 
break; 


DD); 
window.onload = function(){// 页 面 加载 时 给 有 孩子 结 点 的 元 素 动态 添加 图 标 
var labels = document.getElementById('menu zzjs net).getElementsByTasgName(label); 
for(var i=0;i<labels.length;i++){ 
Var span = document.createElement('span'): 
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span.style.cssText ='display:inline-block:height 1 8px:;vertical-align:middle;width:16px:;cursor:pointer;'; 

span.innerHTML ="" 

span.className = 'add'; 

if(nextnode(labels[i].nextSibling)&é&nextnode(labels[i].nextSibling).nodeName =='UL'") 
labels[il.parentNode.insertBefore(span,labels[i]); 

else 
labels[il.className = rem' 

} 
} 
</script> 


在 IE 9.0 中 浏览 效果 如 图 18-24 所 示 , 可 以 看 到 无 序列 表 在 页 面 上 显示 , 使 用 鼠标 单 击 可 
以 展开 或 关闭 相应 的 选项 ， 但 其 样式 非常 难看 。 
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图 18-24 实现 鼠标 单 击 事件 
04 添加 CSS 代码 ， 修 饰 列表 选项 ， 代 码 如 下 : 


<style type="text/css"> 

body {margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif:} 
ul,li, {margin:0;padding:0;} 

ulflist-style:none;} 

#menu zzjs_net{margin:10px;width:200px:;overflow:hidden:} 

#menu zzjs netli{line-height:25px;} 

#menu zzjs_net .rem {padding-left:16px;} 

#menu_ zzjs_net .add {background:url() -4px -31px no-repeat;} 

#menu zzjs_net .ren{background:url() -4px -7px no-repeat;} 

#menu zzjs_net li a{color:#666666;padding-left:Spx;outline:none:blr:expression(this.onFocus=this.blur());} 
#menu zzis netli input{vertical-align:middle;margin-left:Spx:} 

#menu zzjs_net .two{padding-left:20px;display:none;} 

</style> 


在 IE 9.0 中 的 浏览 效果 如 图 18-25 所 示 ， 可 以 看 到 样式 变 得 非常 漂亮 。 
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图 18-25 最 终 效果 
18.9 ”综合 实例 9 一 一 时 钟 特效 


在 HTML 5 技术 中 ， 新 增 了 一 个 容器 画布 canvas， 用 来 在 页 面 上 绘制 一 些 图 形 ， 利 用 这 
个 新 的 特性 ,可 以 在 网 页 中 创建 一 个 类 似 于 钟表 的 特效 。 本 实例 结合 第 2 章 知识 , 创建 一 个 时 
钟 特效 。 具 体 步骤 如 下 所 示 。 

tQU 分 析 需 求 。 在 画布 上 绘制 时 钟 ， 需 要 绘制 几 个 必要 的 图 形 ， 表 盘 、 时 针 、 分 针 、 秒 
针 和 中 心 圆 。 将 上 面 几 个 图 形 组 合 起 来 ， 便 构成 了 一 个 时 针 界 面 ， 然 后 使 用 JavaScript 代码 ， 
根据 时 间 移动 秒针 、 分 针 和 时 针 。 实 例 完成 后 ， 效 果 如 图 18-26 所 示 。 
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图 18-26 ”时 钟 特效 
tog3 创建 HTML 页 面 ， 代 码 如 下 : 


<!IDOCTYPE html> 

<html> 

<head> 

<title>canvas 时 钟 </title> 

</head><body> 

<canvas id="canvas" width="200" height="200" style="border:1px solid #000;"> 您 的 浏览 器 不 支持 Canvas。 
</canvas></body></html> 


上 面 代码 创建 了 一 个 画布 , 其 宽度 为 200 像素 , 高 度 为 200 像素 , 带 有 边框 , 颜色 为 黑色 


300°% 
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样式 为 直线 型 。 在 Firefox 5.0 中 的 浏览 效果 如 图 18-27 所 示 ， 可 以 看 到 显示 了 一 个 带 有 黑色 边 
框 的 画布 ， 画 布 中 没有 任何 信息 。 
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图 18-27 定义 画布 
3 添加 JavaScript， 绘 制 不 同 图 形 ， 代 码 如 下 : 


<script type="text/JavaScript" language="JavaScript" charset="utf-8"> 
Var canvas = document.getElementById('canvas'); 
Var ctx = canvas.getContext('2d"); 
if(ctx){ 
var timerld; 
var frameRate = 60; 
function canvObject(){ 
this.x = 0; 
this.y = 0; 
this.rotation = 0; 
this.borderWidth = 2; 
this.borderColor = #000000'; 
this.fill = false; 
this.fillColor = '#ff0000"'; 
this.update = function(){ 
if(!this.ctx)throw new Error(' 你 没有 指定 ctx 对 象 。"); 
Var ctx = this.ctx 
ctx.save(); 
ctx.line Width = this.borderWidth; 
ctx.strokeStyle = this.borderColor; 
ctx.fillStyle = this.fillColor; 
ctx.translate(this.x, this.y); 
ithis.rotation)ctx.rotate(this.rotation * Math.PI180); 
if(this.draw )this.draw(ctx); 
ifthis.fillD)ctx.fill0O; 
ctx.stroke(); 
ctx.restore(); 
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timerId = setInterval(function(O){ 
/ 清除 画布 
ctx.clearRect(0,0,200,200); 
/ 填充 背景 色 
ctx.fillStyle = 'orange'; 
ctx.fillRect(0,0,200,200); 
1/ 表 得 
circle.update(); 
/ 刻度 
for(var i=0;cache=ls[i++];)cache.update(); 
/ 时 针 
hour.rotation = (new Date()).getHours() * 30; 
hour.update(); 
1 分 针 
minute.rotation = (new Date()).getMinutes() * 6; 
minute.update(); 
1 秒针 
seconds.rotation = (new Date()).getSeconds() * 6; 
seconds.update(); 
// 中 心 圆 
center.update(); 

},(1000/frameRate)|0): 

}else{ 
alert(' 您 的 浏览 器 不 支持 Canvas 无 法 预览 .mn 跟 我 一 起 说 :" 很 遗憾 1"); 
} 


</script> 

由 于 篇 幅 比 较 长 , 这 里 只 显示 了 部 分 代码 。 其 详细 代码 可 以 在 下 载 代码 中 查询 。 上 面 代码 
首先 绘制 了 不 同类 型 的 图 形 , 例如 时 针 、 秒 针 和 分 针 等 。 然 后 再 将 其 组 合 在 一 起 ， 并 根据 时 间 
定义 时 针 等 指向 ,在 Firefox 5.0 中 浏览 效果 如 图 18-28 所 示 , 可 以 看 到 页 面 中 出 现 了 一 个 时 钟 ， 
其 秒针 在 不 停 地 移动 。 


国 


图 18-28 ”最 终 特效 
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18.10 ”综合 实例 10 一 一 颜色 选择 器 


在 页 面 中 定义 背景 色 和 字体 颜色 , 是 比较 常见 的 一 种 操作 , 在 选取 颜色 时 比较 麻烦 ， 不 知 
道 哪 种 颜色 适合 , 并 且 不 知道 颜色 值 是 什么 。 此 时 可 以 利用 颜色 选择 器 来 定义 颜色 并 获取 颜色 
值 。 本 实例 将 创建 一 个 颜色 选择 器 ， 可 以 自由 获取 颜色 值 。 具 体 步 骤 如 下 。 


(QU 分 析 需 求 。 本 实例 原理 非常 简单 ， 就 是 将 几 个 常用 的 的 颜色 值 进 行 组 合 ， 再 合并 ， 
就 是 所 要 选择 的 颜色 值 ， 是 利用 JavaScript 代码 完成 的 。 实 例 完成 后 ， 实 际 效果 如 图 18-29 所 
示 。 


访 Fnsses e655s 


Ce 


图 18-29 ” 设 定 页 面 背景 色 
92 创建 基本 HTML 页 面 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 
<head><title> 背 景色 选择 器 <jtitle> 
</head> 

<body bgcolor="#FFFFFF"> 
</body></html> 


to 引 添加 JavaScript 代码 ， 实 现 颜 色 选 择 ， 代 码 如 下 : 
<script language="JavaScript"> 


el 
var hex =new Array(6) 
hex[0] = "FF" 
hex[1] = "CC" 
hex[2] = "99" 
hex[3] = "66" 
hex[4] = "33" 
hex[5] = "00" 
function display(triplet) 
1 
document.bgColor ='# + triplet 
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alert( 现 在 的 背景 色 是 #+triplet) 
} 
function drawCell(red, green, blue) 
{ 
document.write(<TD BGCOLOR="# + red + green + blue + ">') 
document.write('<A HREF="JavaScript:display(\" + (red + green + blue) + \")">') 
document.write('<IMG SRC="place.gif' BORDER=0 HEIGHT=12 WIDTH=12>') 
document.write('</A>') 
document.write('</TD>') 
} 
function drawRow!(red, blue) 
document.write('<TR>) 
for(vari=0;i< 6; ++Hi) 
{ 
drawCell(red, hex[i], blue) 
} document.write('</TR>) 
}function drawTable(blue) 
{ 
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>') 
for (vari=0; i<6; ++i) 
1 
drawRow(hex[i], blue) 
} 
document.write('</TABLE>') 
} 
function drawCube() 
document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>) 
for (vari=0; i<6; ++i) 
{ 
document.write('<TD BGCOLOR="#FFFFFF">') 
drawTable(hex[i]) 
document.write(</TD>) 
} document.write('</TR></TABLE>) 
}drawCube() 
// --></script> 


在 上 面 的 代码 中 , 创建 了 一 个 数组 对 象 hex 用 来 存放 不 同 的 颜色 值 。 下 面 几 个 函数 分 别 将 


数组 中 颜色 组 合 在 一 起 ， 并 在 页 面 显示 ，display 函数 完成 定义 背景 颜色 和 显示 颜色 值 。 


项 


页 色 


在 IE 9.0 中 浏览 效果 如 图 18-30 所 示 ， 可 以 看 到 页 面 显示 多 个 表格 ， 每 个 单元 格 代表 一 种 
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【< BET 


和 证 ensses sr 


图 18-30 最终 效果 


18.11 


1. JavaScript 的 数组 中 常用 方法 有 哪些 ? 
@ jion0: 将 array 中 的 所 有 element 以 string 的 形式 连 在 一 起 : 


vara=[1.2.3]; 
s =a.join(); /s 一 "1.2.3" 
s=ajoin(":"); //s=="1:2:3" 


@ reverse(): 将 array 的 element 顺 数 颠 倒 : 


var a =[1,2,3]; 
a.reverse(); 
s=a.join(); //s = "3,2,1" 


@ sort(): 排序 ， 默 认 按 字母 顺序 排序 case sensitive, 可 以 自 定义 排序 方式 : 


var a= [111,4,33,2]; 
a.sort(); //a = [111,2,33,4] 
a.sort(function(a,b) {//a== [2,4,33,111] 
return a-b; // Returns< 0, 0, or >0 
和 


@ concat(): 连接 多 个 array: 


vara= [1,2,3]; 

a.concat(4,5); // return [1,2,3,4,5] 
a.concat([4,5]); // return [1,2,3,4,5] 
a.concat([4,5], [6.7]) // return [1,2,3,4,5,6,7] 
a.concat(4,[5,[6,7]]); // return [1,2,3,4,5,6,7] 


2. JavaScript 中 有 哪些 注释 ? 


在 程序 中 添加 注释 来 描述 代码 的 功能 , 通过 注释 还 可 以 使 一 些 代码 无 效 , 以 实现 逐 行 检查 
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程序 的 目的 ， 可 及 时 发 现 并 解决 问题 。JavaScript 主要 提供 了 3 种 注释 的 方法 : 
@ 单行 注释 : 在 需要 注释 的 代码 前 添加 字符 “//”，// 后 面 的 部 分 会 被 注释 。 
@ 多 行 注释 : 在 代码 前 添加 “/*”， 之 后 添加 “*/”"， 之 间 的 部 分 被 注释 。 
@ HTML 注释 : 使 用 传统 的 HTML 注释 ,，“<! 一 ”和 “-->” 之 间 的 部 分 会 被 注释 ， 注 释 
内 容 可 以 是 一 行 或 多 行 。 


第 19 章 综合 实战 一 一 企业 门户 网 站 


作为 小 型 软件 企业 的 网 站 ， 一 般 规 模 不 是 太 大 ， 通 常 包含 3~5 个 栏目 ， 例 如 “产品 ”、 
“客户 ”和 “联系 我 们 ”栏目 等 , 并 且 有 的 栏目 甚至 只 包含 一 个 页 面 , 例如 “联系 我 们 ”栏目 。 
此 类 网 站 通常 都 是 为 展示 公司 形象 , 说 明 公司 业务 范围 和 产品 特色 的 , 这 样 的 网 站 只 要 一 个 首 
页 加 上 若干 内 容 即 可 。 


19.1 构思 布局 


本 实例 是 模拟 一 个 小 型 软件 公司 的 网 站 , 其 公司 主要 承接 电信 方面 的 各 种 软件 项 目 。 网 站 


上 包括 “首页 ”、“ 产 品 ”、 “客户 ”和 “联系 方式 ”等 栏目 。 本 实例 中 采用 红色 和 白色 配合 ， 
红色 部 分 显示 导航 菜单 ， 白 色 显 示 文 本 信息 。 在 IE 9.0 中 浏览 其 效果 ， 如 图 19-1 所 示 。 
FREE | 


CE reson ox] Oram TT] 


YOUR LOGO COMPANY 
计算 机 网 站 


图 19-1 计算 机 网 站 首页 
19.1.1 设计 分 析 


作为 一 个 软件 公司 网 站 首页 ， 其 页 面 需 要 简单 、 明 了 , 给 人 以 清晰 的 感觉 。 页 头 部 分 主要 
放置 导航 菜单 和 公司 Logo 信息 等 ， 其 Logo 可 以 是 一 张 图 片 或 者 文本 信息 等 ， 页 面 主体 分 为 
两 个 部 分 , 页 面 主体 左 侧 是 公司 介绍 , 可 以 在 首页 上 概括 性 描述 ; 页 面 主 体 右 侧 是 “最 新 消息 ”、 
“产品 展示 ”和 “客户 ”等 ， 其 中 “产品 展示 ”和 “客户 ”的 链接 信息 ， 以 列表 形式 介绍 重要 
信息 ， 也 可 以 通过 页 面 顶 部 导航 菜单 进入 相应 页 面 介 绍 。 

对 于 网 站 的 其 他 子 页 面 ， 篇 幅 可 以 比较 短 ， 其 重点 是 介绍 软件 公司 业务 、 联 系 方式 、 产 品 
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信息 等 ， 页 面 需 要 与 首页 风格 相同 。 
19.1.2 ”排版 架构 


从 上 面 的 效果 图 可 以 看 出 , 页面 结构 并 不 是 太 复杂 , 采用 的 是 上 中 下 结构 ,页 面 主体 部 分 
又 嵌 套 了 一 个 左右 版 式 结构 。 其 效果 如 图 19-2 所 示 。 


共同 组 成 了 页 头 部 分 , top 层 用 于 显示 页 面 logo，header 层 用 于 显示 页 头 文本 信息 ，me 层 用 于 


页 头 部 分 
页 面 主体 


左 侧 || 中 间 | | 右 侧 
列表 || 列表 || 列表 


页 脚 部 分 


图 19-2 页 面 总 体 框架 


在 HTML 页面 中 , 通常 使 用 DIV 层 对 应 上 面 不 同 的 区 域 , 可 以 是 一 个 DIV 层 对 应 
也 可 以 是 多 个 DIV 层 对 应 同一 个 区 域 。 本 实例 的 DIV 代码 如 下 : 


<div id="container">/* 页 面 布局 容器 */ 
<div id="top"> 

</div><!--end top--> 

<div id="header"> 

</div><!--end header--> 

<div id=me>/# 导 航 菜单 #/ 

</div> 

<div id="content"> 

<div id="text">/* 页 面 主体 左 侧 内 容 */ 
</div><!--end text--> 

<div id="column">/* 页 面 主体 右 侧 内 容 */ 
</div><!--end column--> 
</div><!--end content--> 

<div id="footer">/* 页 脚 部 分 */ 
</div><!--end footer--> 

</div><!--end container--> 


个 区 


上 面 代 码 中 ，id 名 称 为 container 的 层 是 整个 页 面 的 布局 容器 ，top 层 、header 层 和 me 层 


显示 页 头 导 航 菜单 信息 。 页 面 主体 是 content 层 ， 其 包含 了 两 个 层 ，text 层 和 column 层 ，text 


层 是 页 面 主体 左 侧 的 内 容 ， 显 示 公 司 介绍 信息 ; column 层 同 页 面 主体 右 侧 的 内 容 ， 显 示 公 司 
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的 导航 链接 ; Footer 层 是 页 脚 部 分 ， 用 于 显示 版 权 信息 和 地 址 信息 。 
在 CSS 文件 中 ， 对 应 container 层 和 content 层 的 CSS 代码 如 下 : 


RR: 


#container 
{ 
margin: Opt auto; 
width: 770px; 
position: relative; } 
#content { 
background: transparent url(images/content.gif ) repeat-y; 
clear: both; 
margin-top: Spx; 
width: 770px; 
} 


上 面 代码 中 ，#container 选择 器 定义 了 整个 布局 容器 的 宽 
选择 器 定义 了 背景 图 片 、 宽 度 和 顶部 边 距 。 


19.2 ”模块 分 割 


当 页 面 整体 架构 完成 后 ， 就 可 以 动手 制作 不 同 的 模块 区 域 。 其 制作 流程 采用 自 上 而 下 ， 从 
左 到 右 的 顺序 。 完 成 后 ， 再 对 页 面 样式 进行 整体 调整 。 


19.2.1 Logo 与 导航 菜单 


- 般 情 况 下 ，Logo 信息 和 导航 菜单 都 放 在 页 面 项 部 ， 作 为 页 头 部 分 。 其 中 Logo 信息 作为 
公司 标志 , 通常 放 在 页 面 的 左上 角 或 右上 角 ; 导航 菜单 放 在 页 头 部 分 和 页 面 主体 二 者 之 间 , 用 
于 链接 其 他 的 页 面 。 在 正 9.0 中 浏览 效果 如 图 19-3 所 示 。 


总 、 外 边 距 和 定位 方式 。#content 


YOUR LOGO COMPANY 


计算 机 网 站 


图 19-3 页面 Logo 和 导航 菜单 
在 HTML 文件 中 ， 用 于 实现 页 头 部 分 的 HTML 代码 如 下 : 


<div id="top"> 
</div><!--end top--> 
<div id="header"> 
<hl> 计 算 机 网 站 </hl> 
</div><!--end header--> 


<div id=me> 


上 面 代码 中 ，top 层 用 于 显示 页 面 Logo，header 层 用 于 显示 页 头 的 文本 信息 ， 例 如 公司 名 
称 ， me 层 用 于 显示 页 头 导航 菜单 。 在 me 层 中 ， 有 一 个 无 序列 表 ， 用 于 制作 导航 菜单 ， 每 个 
选项 都 由 超级 链接 组 成 。 

在 CSS 样式 文件 中 ， 对 应 上 面 标记 的 CSS 代码 如 下 : 
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ul#menu { 
margin: Opt; 
} 
#menulif 
list-style-type: none; 
float: left; 
text-align: center; 
width: 104px; 
margin-right: 3px; 
font-size: 1.05em:; 
} 
#menuaf 
background: transparent url(images/menu.gif) no-repeat: 
overflow: hidden; 
display: block; 
height: 28px; 
padding-top: 3px; 
text-decoration: none; 
twidth: 100%; 
font-size: lem; 
font-family: Verdana,"Geneva CE",lucida,sans-serif; 
color: rgb(255, 255, 255); 
人 
#menu li >a, #menu li >strong { 
width: auto; 
1 
#menu a.actual { 
background: transparent url('images/menu-actual.gif ) no-repeat; 
color: rgb(149, 32, 32); 
} 
#menu a:hover { 
color: rgb(149, 32, 32); 
} 


上 面 代码 中 ，#top 选择 器 定义 了 背景 图 片 和 层 高 ，#header 定义 了 背景 图 片 、 高 度 和 顶部 
外 边 距 ; #menu 层 定义 了 层 定位 方式 和 坐标 位 置 。 其 他 选择 分 别 定义 了 上 面 三 个 层 中 元 素 的 显 
示 样 式 ， 例 如 段落 显示 样式 、 标 题 显示 样式 和 超级 链接 样式 等 。 

19.2.2 ” 左 侧 文本 介绍 


在 页 面 主体 中 ,其 左 侧 版 式 主要 介绍 公司 相关 信息 。 左 侧 文本 采用 的 是 左 浮动 、 固 定 宽度 
的 版 式 设 计 ， 重 点 在 于 调节 宽度 使 不 同 浏览 器 之 间 能 够 效果 一 致 ， 并 且 颜 色 上 要 配合 Logo 和 
左 侧 的 导航 菜单 ， 使 整个 网 站 和 谐 、 大 气 。 在 下 9.0 中 浏览 效果 如 图 19-4 所 示 。 
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欢迎 来 到 我 们 的 网 站 
远大 公司 成 立 于 1998 年 ， 注 册 资本 
1700 万 元 。 是 国家 认定 的 高 新 技术 企 
业 、 软 件 企业 ， 是 专业 的 电信 系统 仿 软 
件 和 应 用 服务 供应 商 。 
公司 坚持 走 自立 创新 、 稳 步 发 展 的 
道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 
以 产品 自身 的 品质 ， 先 进 的 技术 和 良好 
的 服务 取信 于 用 户 。2002 年 至 今 公司 先 
后 有 多 个 软件 产品 获得 了 河南 省 信息 产 
业 厅 颁 发 的 《软件 产品 登记 证 书 》 和 国 
家 版 权 局 颁发 的 《软件 著作 权 登 记 证 


癌 9 


注 
六 
济 
EE 
只 
起 
器 
当 
浒 
加 
伪 
淋 
闻 洒 回归 


金 无 偿 资助 百 余 万 元 。 并 正式 获得 中 
质量 体系 认证 中 心 颁 发 的 509001:2008 质 量 管理 体系 认证 证 书 。 


图 19-4 页 面 左 侧 文本 介绍 
在 HTML 文件 中 ， 创 建 页 面 左 侧 内 容 介绍 的 代码 如 下 : 


<div id="content"> 

<div id="text"> 

<h3 class="headlines"><a hre 人 ="#" title="testing"> 欢 迎 来 到 我 们 的 网 站 </a></h3> 

<p><img src="images/fotos.jpg" alt="fotos" align="right" /> 

远大 公司 成 立 于 1998 年 ， 注 册 资 本 1700 万 元 。 是 国家 认定 的 高 新 技术 企业 、 软 件 企 业 ， 是 专业 的 电信 
系统 仿 软 件 和 应 用 服务 供应 商 。</p><p> 

公司 坚持 走 自立 创新 、 稳 步 发 展 的 道路 ， 以 创立 品牌 为 自己 的 基本 策略 ， 以 产品 自身 的 品质 ， 先 进 的 技 
术 和 良好 的 服务 取信 于 用 户 。2002 年 至 今 公司 先后 有 多 个 软件 产品 获得 了 河南 省 信息 产业 厅 颁 发 的 《软件 产 
品 登 记 证 书 》 和 国家 版 权 局 颁发 的 《软件 著作 权 登 记 证 书 》。 同 时 远大 的 进步 和 发 展 ， 也 得 到 了 政府 部 门 的 
大 力 支 持 和 关注 ， 获 得 国家 科技 部 和 省 、 市 政府 部 门 技术 创新 基金 无 偿 资 助 百 余 万 元 。 并 正式 获得 中 国 质量 
体系 认证 中 心 颁发 的 ISO9001:2008 质量 管理 体系 认证 证 书 。 

</p> 

<p>&nbsp;</p> 

</div><!--end text--> 

</div> 


上 面 代码 中 ，content 层 是 页 面 主体 ，text 层 是 页 面 主体 中 左 侧 的 部 分 。text 层 包 含 了 标题 


和 段落 信息 ， 段 落 中 包含 一 张 图 片 。 
在 CSS 文件 中 ， 对 于 上 面 HTML 标记 的 CSS 代码 ， 如 下 所 示 : 


#text { 

background: rgb(255, 255, 255) url('text-top.gif) no-repeat; 
width: 518px; 

color: rgb(0, 0, 0); 

float: left: 

} 
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#text hl1, #text h2, #text h3, #text h4 { 
color: rgb(140, 9, 9); 
} 
#text h3.headlinesa { 
color: rgb(140, 9, 9); 
} 
上 面 代码 中 ，#text 层 定义 了 背景 图 片 、 背 景 颜色 、 字 体 颜色 和 页 面 左 浮动 。 下 面 选择 器 
定义 了 标题 显示 样式 ,例如 字体 颜色 等 。“#text h3.headlines a” 选 择 器 定义 了 标题 3、 类 headlines 
和 超级 链接 显示 样式 。 


19.2.3” 右 侧 导 航 链接 


在 页 面 主体 右 侧 版 式 中 ,其 文本 信息 不 是 太 多 , 但 非常 重要 ， 是 首页 用 于 链接 其 他 页 面 的 
导航 链接 ,例如 客户 详细 信息 、 最 新 消息 等 。 同 样 ， 右 侧 版 式 需要 设置 为 固定 宽度 并 且 向 左 浮 
动 的 版 式 。 在 IE 9.0 中 浏览 页 面 效果 如 图 19-5 所 示 。 


图 19-5 页 面 右 侧 链接 


从 上 面 的 效果 图 可 以 看 到 ， 需 要 包含 几 个 无 序列 表 和 标题 ， 其 中 列表 选项 为 超级 链接 。 
HTML 文件 中 用 于 创建 页 面 主体 右 侧 版 式 的 代码 ， 如 下 所 示 : 


<div id="column"> 

<h3><span> 最 新 消息 </span></h3> 

<ul class="category_list"><li><a href="## 人 > 公司 组 织 员 工 连云港 旅游 </a></li> 
<li><a hre 全 "ff">2011 员工 乒乓 球 大 赛 开幕 </a></li> 

<li><a hre 人 ="#"> 公 司 总 经 理会 见 实习 大 学 生 </a></li> 

<li><a hre 伍 "#'> 公 司 销 售 部 门 再 传 捷报 </a></li></ul> 

<h3><span> 产 品 展示 </span></h3> 

<ul class="recent articles"><li><a href-"#"> 在 线 人 员 素质 考核 系统 </a></li> 
<li><a hre 全 "加 "> 线 损 计 算 机 系统 </a></li> 

<li><a hre 伟 "如 > 质量 运用 管理 系统 </a></li></ul> 

<h3><span> 客 户 </span></h3> 

<ul class="wet recent_ comments"><li><a hre 全 "#"><cite> 华 中 地 区 </cite></a><p> 河 南 地 区 </p></i> 
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<li><a hre 伍 "#"><cite> 华 东 地 区 </cite></a><p> 上 海地 区 </p></li></ul> 
</div><!--end column--> 
<div id="content-bottom">&nbsp;</div> 


在 上 面 的 代码 中 ， 创 建 了 两 个 层 ， 分 别 为 column 层 和 content-bottom 层 。 其 中 column 层 
用 于 显示 页 面 主体 中 右 侧 链接 ， 并 包含 了 3 个 标题 和 3 个 超级 链接 。content-bottom 层 用 于 消 
除 float 层 的 浮动 效果 。 

在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 CSS 代码 ， 如 下 所 示 : 


#column { 

background: rgb(142, 14, 14) url(images/column.gif) no-repeat; 
float: right; 

width: 247px; } 
#column p { font-size: 0.7em; } 
#column ul { font-size: 0.8em; } 
#column h3 { 

background: transparent url('images/h3-column.gif) no-repeat:; 

position: relative; 

left: -18px; 

height: 26px; 

width: 215px; 

margin-top: 10px; 

padding-top: 6px; 

padding-left: 6px; 

font-size: 0.9em; 

z-index: 1; 

font-family: Verdana,"Geneva CE",lucida,sans-serif: 
} 
#column h3 span { margin-left: 10px; } 
#column span.name { 

text-align: right; 

color: rgb(223, 58, 0); 

margin-right: Spx; 
} 
#column a { color: rgb(255, 255, 255); } 
#column a:hover { color: rgb(80, 210, 122); } 
p.comments { 

text-align: right; 

font-size: 0.8em; 

font-weight: bold; 

padding-right: 10px; 
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#content-bottom { 
background: transparent url(images/content-bottom.gif ) no-repeat scroll left bottom:; 
clear: both; 
display: block; 
width: 770px; 
height: 13px; 
font-size: Opt; 


} 


上 面 代码 中 ,#column 选择 器 定义 背景 图 片 、 背 景 颜色 、 页 面 右 浮动 和 宽度 。#content-bottom 
选择 器 定义 背景 图 片 、 宽 度 、 高度、 字体 大 小 和 以 块 显示 , 并 且 使 用 clear 消除 前 面 层 使 用 float 
的 影响 。 其 他 选择 器 主要 定义 column 层 中 其 他 元 素 的 显示 样式 ， 例 如 无 序列 表 样 式 、 列 表 选 
项 样式 和 超级 链接 样式 等 。 


19.2.4 版权 信息 


版 权 信息 一 般 放 置 到 页 面 底部 ,用 于 介绍 页 面 的 作者 、 地 址 信息 等 ， 是 页 脚 的 一 部 分 。 页 
脚 部 分 和 其 他 网 页 部 分 一 样 ， 需 要 保持 简单 、 清 晰 的 风格 。 在 三 9.0 中 的 浏览 效果 如 图 19-6 


所 示 。 
图 19-6 ”页 脚 部 分 
从 图 19-6 可 以 看 出 ， 此 页 脚 部 分 非常 简单 ， 只 包含 了 一 个 作者 信息 的 超级 链接 ， 因 此 设 
置 起 来 比较 方便 ， 其 代码 如 下 : 
<div id="footer"> 
<p id="ivorius"><a hre 伍 "#"> 网 页 设计 者 : 李 四 工 作 室 </a></p> 


</div><!--end footer--> 


在 上 面 的 代码 中 ， 层 footer 包含 了 一 个 段落 信息 ， 其 中 段落 的 id 是 ivorius。 
在 CSS 文件 中 ， 用 于 修饰 上 面 HTML 标记 的 样式 代码 ， 如 下 所 示 : 


#footer { 
background: transparent url(images/footer.png') no-repeat scroll left bottom; 
margin-top: Spx; 
padding-top: 2px; 
height: 33px; 
} 
#footer p { text-align: center; } 
#footer af color: rgb(255, 255, 255); } 
#footer a:hover { color: rgb(223, 58, 0); } 
p#ivorius { 
float: right; 
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margin-right: 13px; 
font-size: 0.75em; 


} 
p#ivorius a { color: rgb(80, 210, 122); } 


上 面 代码 中 ，#footer 选择 器 定义 了 页 脚背 景 图 片 、 内 外 边 距 的 顶部 距离 和 高 度 。 其 他 选 
择 器 定义 了 页 脚 部 分 文本 信息 的 对 齐 方式 、 超 级 链接 样式 等 。 


19.3 整体 调整 


前 面 的 各 个 小 节 中 ,完成 了 首页 中 不 同 部 分 的 制作 ,其 整个 页 面 基 本 上 都 已 经 成 形 。 在 制 
作 完 成 后 ， 需 要 根据 页 面 实际 效果 做 一 些 细节 上 的 调整 ， 从 而 能 更 加 完善 页 面 整体 效果 ,例如 
各 块 之 间 的 padding 和 margin 值 是 否 与 页 面 整 体 协调 ， 各 个 子 块 之 间 是 否 协调 统一 等 。 页 面 
效果 调整 前 ， 在 正 9.0 中 的 浏览 效果 如 图 19-7 所 示 。 


OO wm -ex oranm | A 
YOUR LOGO COMPANY 


欢迎 来 到 我 们 的 网 站 


图 19-7 页 面 调整 前 效果 


从 图 19-7 可 以 发 现 页 面 段 落 没 有 缩 进 ， 页 面 右 侧 列表 选项 之 间距 离 太 小 等 。 这 时 可 以 利 
用 CSS 属性 调整 ， 其 代码 如 下 所 示 : 


p { margin: 0.4em 0.5em; font-size: 0.8S5em:text-indent:2em; } 
a { color: rgb(25, 126, 241); text-decoration: underline; } 
a:hover { color: rgb(223, 58, 0); text-decoration: none; } 

a img { border: medium none ; } 

ul, ol { margin: 0.5em 2.5em; } 

h2 { margin: 0.6em Opt 0.4em 0.4em; } 

h3, h4, h5 { margin: lem Opt 0.4em 0.4em; } 
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* { margin: Opt; padding: Opt; } 
body { background: rgb(61, 62, 63) url(images/body.gif) repeat; color: white; font-size: lem; font-family: 
"Trebuchet MS",Tahoma,"Geneva CE",lucida; } 


上 面 代码 中 ， 全 局 选择 器 “*” 设 置 了 内 外 边 距 距离 ，body 标记 选择 器 设置 了 背景 颜色 、 
图 片 、 字 体 大 小 ,字体 颜色 和 字形 等 。 其 他 选择 器 分 别 设置 了 段落 、 超 级 链接 、 标 题 和 列表 等 
样式 信息 。 


19.4 ”问题 解答 


1. Firefox 和 了 正 浏览 器 如 何 处 理 负 边界 问题 ? 

在 I 中 ,对 于 超出 父 元 素 的 部 分 会 被 父 元 素 覆盖 ,而 在 Firefox 中 ， 对 于 超出 父 元 素 的 部 
分 会 覆盖 父 元 素 , 但 前 提 是 父 元 素 有 边框 或 内 边 距 , 不 然 负 边 距 会 显示 在 父 元 素 上 , 使 得 父 元 
素 拥有 负 边 距 。 在 进行 网 页 设计 时 ， 针 对 上 面 的 情况 可 以 对 元 素 进行 相对 定位 。 

2. 在 定义 子 元 素 的 上 边 距 时 ， 如 果 超 出 元 素 高 度 ， 怎 么 处 理 ? 

在 正 浏 览 器 中 , 子 元 素 上 边 距 显示 正常 ， 而 在 Firefox 浏览 器 中 ， 子 元 素 上 边 距 显示 在 父 
元 素 上 方 。 其 解决 办 法 是 在 父 元 素 中 增加 overflow:hidden 语句 或 给 父 元 素 增加 边框 或 内 边 距 。 
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HTML 5 作为 下 一 代 Web 开发 标准 ， 成 为 主流 指日可待 。 它 对 音频 视频 、 事 件 处 理 、 绘 
图 等 的 支持 都 让 人 们 非常 期 待 。 本 章 主要 通过 一 个 HTML 5 游戏 ， 让 读者 轻松 掌握 HTML 5、 
CSS 和 JavaScript 的 新 特性 ， 并 能 灵活 应 用 到 Web 开发 中 。 


20.1 游戏 概述 


本 实例 将 制作 一 个 星际 争霸 的 游戏 ， 需 要 实现 的 效果 如 下 。 

玩家 按 Enter 键 开 始 游戏 ， 进 入 游戏 主 界面 后 ， 按 键盘 上 的 左右 键 控制 游戏 的 移动 方向 ， 
按 A 键 开 始 射击 。 默 认 情况 下 ， 鞠 家 的 生命 值 为 100 分 ， 如 果 玩 家 没有 射击 到 敌 机 ， 则 分 为 
两 种 情况 ， 天 机 和 玩家 的 战机 相 接 ， 则 减少 玩家 生命 值 10 分 ， 敌 机 和 玩家 的 战机 没有 相 撞 ， 
则 玩家 的 生命 值 不 减少 。 

游戏 开始 页 面 的 效果 如 图 20-1 所 示 。 


图 20-1 游戏 开始 界面 
按 Enter 键 ， 进 入 游戏 运行 页 面 ， 按 左右 键 控制 方向 ， 按 A 键 射击 敌 机 ， 效 果 如 图 20-2 
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图 20-2 游戏 主 界面 


20.2 ”游戏 需求 分 析 


创建 星际 争霸 游戏 主要 的 文件 夹 列表 如 图 20-3 所 示 。 


大 小 ”类 型 
文件 来 
文件 来 


次 件 夹 
图 index. html 1 KB Firefox HIML Do... 


图 20-3 ”游戏 的 主要 文件 夹 列表 
其 中 css 文件 夹 下 主要 包括 游戏 网 页 的 样式 表 ， 文 件 名 称 为 main.css。images 文件 夹 下 主 
要 包括 游戏 的 飞机 和 环境 背景 图 等 。js 文件 夹 下 主要 包括 jquery.js 和 scriptjs 两 个 文件 。 其 中 


jquery.js 主要 定义 了 JavaScript 脚本 的 框架 , scriptjs 文件 主要 是 为 了 实现 游戏 功能 。 Index.html 
是 游戏 启动 的 主页 面 。 


Images 文件 夹 下 的 图 片 效 果 如 图 20-4 所 示 。 


Sl 
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explosion. pne intro. jp 名 
学 稼 件 只 多 a 
levelmap. jpe Plane. pne rocket. pne 


图 20-4 ”游戏 需要 的 主要 图 片 
20.3 HTML 5、CSS 和 JavaScript 搭配 实现 


下 面 查看 游戏 实现 所 需要 的 HTML 5、CSS 和 JavaScript 的 技术 。 
20.3.1 基本 的 HTML 5 结构 和 标记 
用 户 首先 需要 创建 Index.html， 实 现 基本 的 结构 和 标记 。 具 体 的 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en" > 
<head> 
<meta charset="GB2312" /> 
<title> 星 际 争霸 游戏 </title> 
<!-- 添加 样式 表 --> 
<link href="css/main.css" rel="stylesheet" type="text/css" 亡 
<!-- 添加 scripts 脚本 代码 --> 
<!--[ifltIE 9]> 
<script Src="http://html $shiv.googlecode.com/svn/trunk/html $5.js"></script> 
<![endifl--> 
<script src="js/jquery.js"></script> 
<script src="js/script.js"></script> 
</head> 
<body> 
<header> 
<h2> 星 际 争霸 <h2> 
</header> 
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<div class="container"> 
<canvas id="scene" width="700" height="700" tabindex="1"></canvas> 
</div> 
</body> 
</html> 
其 中 <!--[if lt 正 9]> 表 示 如 果 浏 览 器 版 本 小 于 IE9。 则 加 载 <script src="http:VHTML 
5shiv.googlecode.com/svn/trunk/HTML 5.js"></script>JavaScript 脚 本 代 码 。 <script 
src="js/jquery.js"></script> 和 <script src="js/scriptjs"></scrip 仿 代码 表示 加 载 JavaScript 脚本 。 
<canvas id="scene" width="700" height="700" tabindex="1"></canvas> 表 示 绘 图 的 宽 高 为 700X 
700 像素 ，tabindex="1" 表 示 键 盘 移动 顺序 。 
运行 效果 如 图 20-5 所 示 。 
星际 争 闫 游戏 - 了 ozil1a Firefox 加 回国 | 
文件 @) 编辑 区) 查看 WW) 历史 G) 书签 @) 工具 CI) 才 肌 
| 站 星际 争夺 游戏 x 国 
” @fil/ OO 入- 百人 Or 


人 


星际 争霸 


图 20-5 ”游戏 主 界面 
HTML 5 最 重要 的 新 特征 主要 包括 canvas。 这 项 新 技术 为 开发 人 员 提 供 了 一 个 新 途径 ， 可 
以 采用 一 种 完全 自由 的 方式 绘图 、 包 含 图 像 以 及 放置 文本 。 与 以 前 的 HTML 版 本 相 比 ， 这 是 
一 个 比较 显著 的 改进 。 在 以 前 的 版 本 中 ， 虽 然 也 能 完成 一 些 简单 的 图 形 ， 或 者 使 用 JavaScript 
脚本 实现 ， 但 是 使 用 canvas 可 以 在 画布 上 自由 地 绘图 。 


20.3.2 使 用 CSS 修改 页 面 


CSS 允许 用 户 为 HTML 5 文档 中 的 各 个 部 分 指定 格式 ， 特 别 对 静态 的 HTML、CSS 的 功 
能 十 分 强大 。 此 游戏 的 CSS 样式 表 的 名 称 为 main.css 文件 。 代 码 如 下 : 


Sa 
margin: 0; 
padding: 0; 
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} 
html { 
background-attachment: fixed; 
background: #bda9a2; 
background: -moz-linear-gradient(top, #bda9a2 0%, #90817a 47%, #6f6059 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bda9a2), color-stop(47%, 
#90817a), color-stop(100%,#6f6059)); 
background: -webkit-linear-gradient(top, #bda9a2 0%,#90817a 47%,#6f6059 100%); 
background: -0-linear-gradient(top, #bda9a2 0%,#90817a 47%,#6f6059 100%); 
background: -ms-linear-gradient(top, #bda9a2 0%,#90817a 47%,#6f6059 100%); 
background: linear-gradient(to bottom, #bda9a2 0%,#90817a 47%,#6f6059 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bda9a2', endColorstr='#6f6059', 
GradientType=0 ); 
height: 100%; 


上 

header { 
background-color:rgba(33, 33, 33, 0.9); 
color:#ffF: 
display:block; 
font: 14px/1.3 Arial,sans-serif; 
height:S0px; 
position:relative; 

} 

header h2{ 


font-size: 22px; 
margin: Opx auto; 
padding: 10px 0; 
width: 80%; 
text-align: center; 

} 

header a, a:visited { 
text-decoration:none; 


color:#fcfcfe:; 
} 
#scene { 
display: block; 
height: 700px: 


margin: 10px auto; 
position: relative; 
width: 700px; 
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经 过 CSS 样式 表 修 改 后 ， 界 面 效果 如 图 20-6 所 示 。 
5 过 滞 


图 20-6 CSS 修饰 过 的 界面 
20.3.3 JavaScript 编程 


JavaScript 是 一 种 脚本 编程 语音 ， 提 供 了 不 少 内 置 的 函数 来 访问 HTML 文档 的 各 个 部 分 ， 
包括 CSS 元 素 的 样式 。 

另外 ， 本 游戏 使 用 的 是 jQuery 框架 ，jQuery 是 继 prototype 之 后 又 一 个 优秀 的 JavaScript 
框架 。 它 是 轻 量 级 的 JS 库 ， 兼 容 CSS3， 还 兼容 各 种 浏览 器 。jQuery 使 用 户 能 更 方便 地 处 理 
HTML 文档 和 事件 ， 实 现 动画 效果 。 

其 中 ，JavaScript 文件 的 内 容 和 作用 如 下 : 


/ 定义 图 像 对象 

var backgroundImage:; 

Var ORocketImage; 

Var OExplosionImage; 

var introImage; 

Var OoEnemyImasge; 

variBgShiftY = 9300; // 水 平 宽度 为 10000 - canvas 高 度 为 700 
varbPause = true; // 游戏 暂停 

Var plane = null; / 定义 飞机 对 象 

var rockets = []; / 定义 飞机 移动 数组 
var enemies = []; / 定义 敌 机 数组 

var explosions = []; / 定义 飞机 爆炸 数组 
varplaneW =200; / 定义 飞机 的 宽度 
var planeH = 110; // 定义 飞机 的 高 度 
Var iSprPos =2; // 飞机 的 初始 框架 
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thish = h; 
this.sprite = sprite; 
this.image = image; 
} 
// 从 x 和 y 之 中 随机 地 获取 字母 的 函数 
function getRand(x, y) { 
return Math.floor(Math.random()*y)+x; 
} 
// 初始 显示 函数 
function displayIntro() { 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
ctx.drawImage(introImage, 0, 0,700, 700); 
} 
/ 绘制 主要 的 场景 函数 
function drawScene() { 
if (! bPause) { 
iBgShiftY -= 2;// 飞机 移动 的 范围 
if (iBgShiftY< 5) { 
bPause = true; 
// 绘制 场景 
ctx.font ='40px Verdana'; 
ctx.fillStyle = #ffP; 
ctx.fillText('Finish, your score: ' + iScore * 10 +' points', 50, 200); 
return; 
} 
/ 通过 按键 控制 飞机 
processPressedKeys(); 
// 清除 绘图 
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
/ 绘制 游戏 背景 
ctx.drawImage(backgroundImage, 0, 0 + iBgShiftY, 700, 700, 0, 0, 700, 700); 
// 绘制 游戏 飞机 
ctx.drawImage(plane.image, iSprPos*plane.w, 0, plane.w, plane.h, plane.x - plane.w/2, plane.y - 
plane.h/2, plane.w, plane.h); 
// 绘制 爆炸 效果 
if (rockets.length >0) { 
for (var key in rockets) { 
if (rockets[key] != undefined) { 
ctx.drawImage(rockets[key].image, rockets[key].x, rockets[key].y); 
rockets[keyl.y -= rockets[keyl].speed; 
// 如 果 攻 击 在 屏幕 范围 之 外 ， 则 忽略 攻击 
if (rockets[key].y< 0) { 


HTMmL 5 从 零 开 始 学 〈 视 频 教学 版 ) 


delete rockets[key]; 


} 
! 
// 绘制 爆炸 
if (explosions.length >0) { 
for (var key in explosions) { 
if (explosions[key] != undefined) { 
/ 显示 爆炸 效果 
ctx.drawImage(explosions[key].image, explosions[key].sprite*explosions[key].w， 0, 
explosions[key].w, explosions[key].h, explosions[key].x - explosions[key].w/2, explosions[key].y - explosions[key]. 
h/2, explosions[key].w, explosions[key].h); 
explosions[key].sprite++; 
/ 如 果 敌 机 被 击毙 ， 则 消除 爆炸 对 象 
让 (explosions[key].sprite >10) { 
delete explosions[key]; 


} 
} 
// 绘制 敌 机 
if (enemies.length >0) { 
for (var ekey in enemies) { 
if (enemies[ekey] != undefined) { 
ctx.drawImage(enemies[ekey].image, enemies[ekey].x, enemies[ekey].y); 
enemies[ekey].y -= enemies[ekey].speed; 
/假如 敌 机 在 屏幕 之 外 ， 则 忽略 敌 机 对 象 
让 (enemies[ekey].y >canvas.height) { 
delete enemies[ekey]; 


} 
if (enemies.length >0) { 
for (var ekey in enemies) { 
if (enemies[ekey] != undefined) { 
/ 碰撞 的 爆炸 效果 
if (rockets.length >0) { 
for (var key in rockets) { 
让 (rockets[key] != undefined) { 
if (rockets[key].y< ”enemies[ekey].y + enemies[ekey].h/2 &é& 
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Tockets[key].x >enemies[ekey].x && rockets[key].x + rockets[key].w< enemies[ekey].x + enemies[ekey].w) { 
explosions.push(new Explosion(enemies[ekey].x + enemies 
[ekey].w /2, enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); 
/ 消除 敌 机 和 爆炸 ， 然 后 增加 1 分 


delete enemies[ekey]; 
delete rockets[key]; 
iScore++; 
} 
} 
} 
} 
/ 飞机 的 碰撞 


if (enemies[ekey] != undefined) { 
if (plane.y - plane.h/2< enemies[ekey].y + enemies[ekey].h/2 && planex - 
plane.w/2< enemies[ekey].x + enemies[ekey].w && plane.x + plane.w/2 >enemies[ekey].x) 了 
explosions.push(new Explosion(enemies[ekey].x + enemies[ekey].w / 2, 
enemies[ekey].y + enemies[ekey].h / 2, 120, 120, 0, oExplosionImage)); 
/ 消除 敌 机 和 制作 损坏 
delete enemies[ekey]; 
iLife -= iDamage; 
让 (iLife<= 0) { // 游戏 结束 
bPause = true; 
1/ 计算 总 得 分 
ctx.font = '38px Verdana'; 
ctx.fillStyle = '#ffP; 
ctx.fillText(‘Game over, your score: ' + iScore * 10 +' points', 25, 200); 
return; 


} 

// 显示 生命 值 和 得 分 

ctx.font = "14px Verdana'; 

ctx.fillStyle = #ffP; 

ctx.fillText('Life: ' + iLife + '/ 100', 50, 660); 
ctx.fillText('Score: ' + iScore * 10, 50, 680); 


1 
/ 游戏 过 程 中 的 按键 函数 


function processPressedKeys() { 
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让 (pressedKeys[37] != undefined) { // 左 键 控制 效果 
if (iSprPos >0) { 
iSprPos--; 
iMoveDir = -7; 
中 
if (plane.x - plane.w /2 >10) { 
plane.x += iMoveDir; 


} 
else if (pressedKeys[39] != undefined) { // 右键 控制 效果 
if (iSprPos<4) { 
iSprPost+; 
iMoveDir = 7; 
} 
if (plane.x + plane.w / 2< canvas.width - 10) { 
plane.x += iMoveDir: 


} 
/ 增加 随机 的 敌 机 函数 
function addEnemy() { 
clearInterval(enTimer); 
var randX = getRand(0, canvas.height - iEnemyH); 
enemies.push(new Enemy(randX., 0, iEnemyW, iEnemyH, - iEnemySpeed, oEnemyImage)); 
var interval = getRand(1000, 4000); 
enTimer = setInterval(addEnemy, interval); // 函数 循环 执行 
// 主要 的 默认 函数 
$(function(){ 
canvas = document.getElementByld('scene'); 
ctx = canvas.getContext('2d"); 
// 载 入 背景 图 片 
backgroundImage = new Image(); 
backgroundImage.src = 'images/levelmap.jpg '; 
backgroundImage.onload = function() { 
b 
backgroundImage.onerror = function() { 
console.log('Error loading the background image.'); 
b 
introImage = new Image(); 
introImage.src = "images/intro.jpg’; 
/ 初始 化 敌 机 攻击 效果 
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oRocketImage = new Image(); 
oRocketImage.src = "images/rocket.png'; 
oRocketImage.onload = function() { } 
/ 初始 化 爆炸 图 片 
oExplosionImage = new Image(); 
OExplosionImage.src = "images/explosion.png'; 
oExplosionImage.onload = function() { } 
/ 初始 化 敌 机 
OoEnemyImage = new Image(); 
oEnemyImage.src = 'images/enemy.png'; 
oEnemyImage.onload = function() { } 
/ 初始 化 玩家 战机 
var OPlaneImage = new Image(); 
oPlaneImage.src = 'images/plane.png': 
oPlaneImage.onload = function() { 
plane = new Plane(canvas.width / 2, canvas.height - 100, planeW, planeH, oPlaneImage); 
} 
S$(window).keydown(function (evb{f // 手动 控制 飞机 的 事件 
var pk = pressedKeys[evt.keyCode]; 
if(! pk) { 
pressedKeys[evt.keyCode] = 1; // 将 按键 添加 进 数 组 
} 
证 (bPause && evt.keyCode == 13) { // 按 下 Enter 键 效 果 
bPause = false; 
/ 开始 游戏 
setInterval(drawScene, 30); // 循环 绘制 游戏 场景 
/ 添加 一 个 敌 机 
addEnemy(); 


人 
$(window).keyup(function (evt) { 
// 松 开 按 键 后 的 事件 
var pk = pressedKeys[evt.keyCodel; 
if (pk) { 
delete pressedKeys[evt.keyCodel; 
/ 从 数组 中 移 除 按键 
} 
让 (evt.keyCode 一 65) {// 按 A 键 开始 攻击 
rockets.push(new Rocket(plane.x - 16, plane.y - plane.h, 32, 32, iRocketSpeed, oRocketImage)); 


} 
让 (evtkeyCode 一 37 || evt.keyCode 一 39) { 
// revert plane sprite to default position 


